/**
Theme Name: Astra
Theme URI: https://wpastra.com/
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Version: 4.13.6
Requires at least: 5.3
WC requires at least: 3.0
WC tested up to: 10.9.1
Tested up to: 7.0
Requires PHP: 5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra
Domain Path: /languages
Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog
AMP: true

Astra WordPress Theme, Copyright 2020 WPAstra.
Astra is distributed under the terms of the GNU GPL.

Astra is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of.
Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/

Astra icon font is based on IcoMoon-Free vector icon by Keyamoon.
IcoMoon-Free vector icon distributed under terms of CC BY 4.0 or GPL. (https://creativecommons.org/licenses/by/4.0/ or https://www.gnu.org/licenses/gpl.html)
Source: http://keyamoon.com/

Flexibility is a JavaScript polyfill for Flexbox By Jonathan Neal, 10up. (https://github.com/jonathantneal/flexibility)
Licensed under MIT ( https://github.com/jonathantneal/flexibility/blob/master/LICENSE.md )

Screenshot image is a collage of actual sites created using the Astra WordPress Theme.

Icons used in the Screenshot image are all licensed under Creative Commons ( CC BY 4.0 ) License ( https://fontawesome.com/license/free )
https://fontawesome.com/v5.15/icons/store?style=solid
https://fontawesome.com/v5.15/icons/shopping-cart?style=solid
https://fontawesome.com/v5.15/icons/pen-square?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid

Illustrations used in the Screenshot images are all licensed under Creative Commons ( CC0 ) License ( https://gumroad.com/l/humaaans )
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/standing-24.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/sitting-2.png

Hand-drawn illustrations used are created by Brainstorm Force and released under Creative Commons ( CC0 ) License.
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/girl-with-image-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/boy-with-code-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/web-browser.png

The same site as screenshot can be imported from here https://websitedemos.net/web-design-agency-08/.

For more information, refer to this document on how to create a page like in the screenshot - https://wpastra.com/docs/replicating-the-screenshot/.

Astra default breadcrumb is based on Breadcrumb Trail by Justin Tadlock. (https://github.com/justintadlock/breadcrumb-trail)
Breadcrumb Trail is distributed under the terms of the GNU GPL v2 or later.

Astra local fonts feature is based on Webfonts Loader by WordPress Themes Team (WPTT). (https://github.com/WPTT/webfont-loader)
Licensed under MIT ( https://github.com/WPTT/webfont-loader/blob/master/LICENSE )

/* Note: The CSS files are loaded from assets/css/ folder. */

/* ================================================================================
   ASTRA THEME HIGH-SPECIFICITY OVERRIDE RESETS FOR DISCOVERYTECHLAB
   ================================================================================ */

html, body, body.page, body.single, #page, .site, .site-content, #primary, #main, 
.ast-container, .ast-plain-container, .ast-page-builder-template, .entry-content, article {
    background-color: #0B0F19 !important;
    color: #E2E8F0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#masthead, #colophon, .ast-archive-description, .entry-header, 
.ast-single-post-order, .site-header-primary-section-wrapper, 
.site-footer-primary-section-wrapper, .ast-header-break-point .main-header-bar,
.ast-small-footer, .ast-breadcrumbs-wrapper, .dtl-skip-link {
    display: none !important;
}

.entry-content ul, .entry-content ol, ul, ol {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.entry-content ul li, .entry-content ol li, ul li, ol li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.entry-content a {
    text-decoration: none !important;
    color: inherit;
}

.site-header {
    background: #0B0F19 !important;
    background-color: #0B0F19 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    z-index: 9999 !important;
    width: 100% !important;
    padding: 16px 0 !important;
}

.site-header .header-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.site-header .logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}

.main-nav {
    display: block !important;
}

.main-nav ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 24px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.main-nav ul li {
    display: inline-block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.main-nav a {
    color: #E2E8F0 !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.main-nav a:hover, .main-nav a.active {
    color: #4FD1C5 !important;
}

.header-search {
    display: flex !important;
    align-items: center !important;
}

.header-search .search-box {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
}

.header-search input {
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    outline: none !important;
    font-size: 0.875rem !important;
    padding: 4px 8px !important;
}

.header-search button {
    background: transparent !important;
    border: none !important;
    color: #A0AEC0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
}


/*
 Theme Name:   Astra Child - DiscoveryTechLab VERIDEX
 Theme URI:    https://discoverytechlab.com/
 Description:  Custom Astra Child Theme for VERIDEX eDiscovery Platform
 Author:       DiscoveryTechLab Engineering Team
 Template:     astra
 Version:      1.0.0
*/

/* ==========================================================================
   DiscoveryTechLab \u2014 Complete Design System & Stylesheet
   Confirmed Tokens, Typography, Layout & Interactive States
   ========================================================================== */

:root {
  /* Color Palette (Section 2 - Confirmed Exact Hex Values) */
  --navy: #0B2545;
  --navy-2: #123163;
  --teal: #12ADA8;
  --teal-dark: #0C8B87;
  --text: #2B2B2B;
  --gray: #6B7280;
  --bg-light: #F5F7FA;
  --white: #FFFFFF;
  --border: #E6E9EF;

  /* Layout & Spacing (Section 1 & 16) */
  --radius: 14px;
  /* Confirmed 14px border radius for cards & images */
  --radius-sm: 8px;
  --maxw: 1440px;
  --section-pad-desktop: 80px;
  --section-pad-tablet: 60px;
  --section-pad-mobile: 40px;

  /* Shadows & Transitions */
  --shadow: 0 10px 30px rgba(11, 37, 69, 0.08);
  --shadow-hover: 0 18px 40px rgba(11, 37, 69, 0.10);
  --transition: 0.25s ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--teal) var(--bg-light);
}

/* Custom Browser Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
  background: var(--teal);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--teal-dark);
}


body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.8;
  /* Roomier 1.8 line-height per Section 3 */
}

/* Skip Navigation Link (A11Y-05 / WCAG 2.4.1) */
.dtl-skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  background: #0B2545;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: 14px;
  z-index: 99999;
  text-decoration: none;
  transition: top 0.2s ease;
}

.dtl-skip-link:focus {
  top: 0;
  outline: 3px solid #12ADA8;
  outline-offset: 2px;
}

/* Comprehensive Typography & Form Element Inheritance Resets */
button,
input,
select,
textarea,
optgroup {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* Input Placeholder Typography & Color Inheritance */
::placeholder,
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  font-family: inherit;
  color: inherit;
  opacity: 0.65;
}

/* Monospace Code & Structural Typography Inheritance */
code,
kbd,
samp,
pre {
  font-family: SFMono-Regular, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;
  font-size: 0.92em;
}

/* Table & Fieldset Typography Inheritance */
table,
th,
td,
caption,
fieldset,
legend {
  font-family: inherit;
  color: inherit;
}

/* Container & WordPress / Astra / Elementor Inheritance Normalization */
.entry-content,
.widget,
.ast-container,
.elementor-widget-container {
  font-family: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Poppins', 'Inter', sans-serif;
  color: var(--navy);
  margin: 0 0 0.5em;
  font-weight: 700;
  line-height: 1.15;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

/* Global Container: Centered layout wrapper \u2014 1320px max-width with 24px horizontal padding.
   Applies universally to all pages (Home, VERIDEX, Category, About, etc.).
   ASTRA-01 NOTE: These scoped selectors are retained as reinforcement for WordPress/Astra/Elementor
   environments where Astra's .ast-container may conflict. The global rule handles all standalone pages. */
.container,
body.tools-archive-page .container,
body.blog-archive-page .container,
body.single-post-page .container,
body.page-veridex .container,
.single-post-container,
.about-main-container {
  width: 100% !important;
  max-width: var(--maxw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Eyebrow / Label Text (Section 3) */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal-dark);
  margin-bottom: 10px;
  display: block;
}

/* Sections */
.section {
  padding: var(--section-pad-desktop) 0;
}

.section.tight {
  padding: var(--section-pad-tablet) 0;
}

.section.light {
  background: var(--bg-light);
}

.section-head {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-head p {
  color: var(--gray);
  font-size: 17px;
  line-height: 1.7;
  text-align: center !important;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid var(--navy);
  color: var(--navy);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}

.btn:hover {
  background: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 37, 69, 0.15);
}

.btn.solid {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

.btn.solid:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(18, 173, 168, 0.25);
}

/* ==========================================================================
   Header & Sticky Navigation (Section 1 & 4)
   ========================================================================== */
/* ASTRA-02: Scoped to this page's body class to prevent conflicting with Astra's own
   sticky header (z-index: 9999) and its Customizer-controlled header styles on all other pages.
   In WordPress + Astra, this header is replaced by the Astra header component. */
body.tools-archive-page header.site-header,
body.page-veridex header.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.97); /* Solid fallback */
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(11, 37, 69, 0.05);
}

@supports (backdrop-filter: blur(10px)) {
  body.tools-archive-page header.site-header,
  body.page-veridex header.site-header {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 22px;
  text-decoration: none;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.logo .mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(18, 173, 168, 0.32);
  transition: transform var(--transition);
  flex-shrink: 0;
}

.logo:hover .mark {
  background: linear-gradient(135deg, var(--teal), var(--navy));
}

.logo .brand-text {
  color: var(--navy);
}

.logo .brand-hl {
  color: var(--teal);
  font-weight: 700;
}

nav.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Main Header Search Bar */
.header-search {
  margin-left: 20px;
}

.header-search .search-box {
  display: flex;
  align-items: center;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 6px 4px 14px;
  transition: all var(--transition);
  max-width: 220px;
}

.header-search .search-box:focus-within {
  border-color: var(--teal) !important;
  background: var(--white) !important;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.2) !important;
  max-width: 200px !important;
  width: 200px !important;
}

.header-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: var(--navy);
  width: 100%;
  font-family: inherit;
}

.header-search button {
  border: none;
  background: var(--navy);
  color: var(--white);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  flex-shrink: 0;
}

.header-search button:hover {
  background: var(--teal);
}

nav.main-nav > ul > li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

nav.main-nav a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--navy) !important;
  padding: 7px 14px !important;
  border-bottom: 3px solid transparent !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

nav.main-nav a:hover,
nav.main-nav a.active {
  color: var(--teal-dark);
  border-bottom-color: var(--teal);
  background: transparent;
}

/* Fix C-05: Removed duplicate header.site-header declaration (was identical to lines 207-224).
   Megamenu Navigation Enhancements continue below. */

nav.main-nav ul li.has-megamenu {
  position: relative !important;
}

nav.main-nav ul li.has-megamenu:hover>a,
nav.main-nav ul li.has-megamenu.is-hovered>a,
nav.main-nav ul li.has-megamenu.open>a {
  color: var(--teal-dark) !important;
  background: rgba(18, 173, 168, 0.1) !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  border-bottom-color: transparent !important;
}

nav.main-nav a .caret {
  font-size: 10px;
  line-height: 1;
  margin-top: -1px;
  transition: transform 0.2s ease, color 0.2s ease;
}

nav.main-nav ul li.has-megamenu:hover>a .caret,
nav.main-nav ul li.has-megamenu.is-hovered>a .caret,
nav.main-nav ul li.has-megamenu.open>a .caret {
  transform: rotate(180deg);
  color: var(--teal-dark);
}

.megamenu-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 24px;
  right: 24px;
  width: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 20px 45px rgba(11, 37, 69, 0.18);
  padding: 20px 28px 28px;
  z-index: 1200;
  max-height: 75vh;
  overflow-y: auto;
}

/* Simple Dropdown Menu Styling */
nav.main-nav ul li.has-dropdown,
.site-header nav.main-nav > ul > li.has-dropdown {
  position: relative !important;
}

nav.main-nav ul li.has-dropdown:hover > a,
nav.main-nav ul li.has-dropdown.is-hovered > a,
nav.main-nav ul li.has-dropdown.open > a {
  color: #0c8b87 !important;
  background: rgba(18, 173, 168, 0.12) !important;
  border-bottom: 5px solid #12ADA8 !important;
  border-radius: 6px !important;
}

nav.main-nav ul li.has-dropdown:hover > a .caret,
nav.main-nav ul li.has-dropdown.is-hovered > a .caret,
nav.main-nav ul li.has-dropdown.open > a .caret {
  transform: rotate(180deg);
  color: #0c8b87 !important;
}

/* Fix REC-07: !important is intentional here to override Astra/WordPress default nav UL styles
   which apply list-style, margin, padding globally. These !important guards prevent
   Astra theme stylesheet specificity from breaking the dropdown layout.
   This is the minimum required set; non-layout properties use standard specificity below. */
.dropdown-menu,
ul.dropdown-menu {
  display: none !important;        /* Must override Astra's default flex/block nav display */
  flex-direction: column !important;
  position: absolute !important;   /* Must escape Astra's position:relative nav containers */
  top: calc(100% + 4px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 175px !important;
  width: max-content !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid #12ADA8 !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 14px 36px rgba(11, 37, 69, 0.15) !important;
  padding: 6px 0 !important;       /* Must override Astra's ul padding */
  margin: 0 !important;            /* Must override Astra's ul margin */
  list-style: none !important;     /* Must override Astra's list-style */
  z-index: 1250 !important;
}

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 16px;
  background: transparent;
  pointer-events: auto;
}

nav.main-nav ul li.has-dropdown:hover > .dropdown-menu,
nav.main-nav ul li.has-dropdown.is-hovered > .dropdown-menu,
nav.main-nav ul li.has-dropdown.open > .dropdown-menu {
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.dropdown-menu li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.dropdown-menu li a {
  display: block !important;
  padding: 8px 16px !important;
  color: #0B2545 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  white-space: nowrap !important;
}

.dropdown-menu li a:hover {
  background: rgba(18, 173, 168, 0.08) !important;
  color: #0C8B87 !important;
  border-bottom: none !important;
}


/* Invisible hover bridge connecting trigger link to megamenu panel */
.megamenu-panel::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  height: 30px;
  background: transparent;
  pointer-events: auto;
  z-index: 1300;
}



.megamenu-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.megamenu-top-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.megamenu-top-badge {
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(18, 173, 168, 0.12);
  color: var(--teal-dark);
  padding: 3px 12px;
  border-radius: 20px;
}

.megamenu-panel::-webkit-scrollbar {
  width: 6px;
}

.megamenu-panel::-webkit-scrollbar-track {
  background: var(--bg-light);
}

.megamenu-panel::-webkit-scrollbar-thumb {
  background: var(--teal);
  border-radius: 4px;
}

nav.main-nav ul li.has-megamenu:hover .megamenu-panel,
nav.main-nav ul li.has-megamenu.is-hovered .megamenu-panel,
nav.main-nav ul li.has-megamenu.open .megamenu-panel {
  display: block;
}

.megamenu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 16px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.megamenu-cat {
  background: var(--bg-light);
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  transition: all var(--transition);
}

.megamenu-cat:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.12);
  background: #FFFFFF;
}

.megamenu-cat-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.25;
}

.megamenu-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.megamenu-links li {
  margin: 0 !important;
  padding: 0 !important;
}

.megamenu-links a {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border-bottom: none !important;
  display: block;
  line-height: 1.35 !important;
  transition: all var(--transition);
}

.megamenu-links a:hover {
  color: var(--teal-dark) !important;
  background: rgba(18, 173, 168, 0.1) !important;
  transform: translateX(2px);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  color: var(--navy);
  cursor: pointer;
  padding: 4px;
}

/* ==========================================================================
   Hero Section (Section 5)
   ========================================================================== */
.hero {
  padding: 110px 0 70px;
  text-align: center;
}

.hero h1 {
  font-size: 58px;
  /* Confirmed 58px desktop per Section 3 */
  max-width: 860px;
  margin: 0 auto 24px;
  font-weight: 800;
}

.hero .lead {
  font-size: 19px;
  color: var(--gray);
  max-width: 640px;
  margin: 0 auto 38px;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Topic Label Strip (Section 5 Deviation) */
.trust-strip {
  padding: 40px 0 90px;
}

.trust-strip .label {
  text-align: center;
  color: var(--gray);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 26px;
  font-weight: 600;
}

.trust-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  opacity: 0.75;
}

.trust-logos span {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  position: relative;
}

.trust-logos span:not(:last-child)::after {
  content: "\u00b7";
  position: absolute;
  right: -26px;
  color: var(--gray);
  opacity: 0.5;
}

/* ==========================================================================
   Feature Cards (3-Column) (Section 1 & 6)
   ========================================================================== */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}

.feature-card {
  background: var(--white);
  padding: 36px 30px;
  border-radius: var(--radius);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1.5px solid rgba(18, 173, 168, 0.35);
  box-shadow: 0 4px 18px rgba(11, 37, 69, 0.04);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--teal);
}

.feature-card .icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(18, 173, 168, 0.15), rgba(11, 37, 69, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.feature-card h4 {
  font-size: 15px;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  color: var(--navy);
}

.feature-card p,
.page-content .feature-card p {
  color: var(--gray);
  font-size: 15.5px;
  line-height: 1.7;
  margin-bottom: 24px;
  flex-grow: 1;
  text-align: left !important;
}

.feature-card .link {
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--teal-dark);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.feature-card:hover .link {
  color: var(--teal);
}

/* ==========================================================================
   Tabbed Feature Section (Section 7)
   ========================================================================== */
.tabs-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.tabs-nav button {
  padding: 12px 24px;
  border-radius: 30px;
  border: 1px solid var(--border);
  background: var(--white);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--navy);
  cursor: pointer;
  transition: all var(--transition);
}

.tabs-nav button:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.tabs-nav button.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  box-shadow: 0 4px 14px rgba(11, 37, 69, 0.2);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: grid;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

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

.tab-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 44px;
}

.tab-item {
  background: var(--white);
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
}

.tab-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.tab-item strong {
  display: block;
  color: var(--navy);
  font-size: 16.5px;
  margin-bottom: 8px;
  font-family: 'Poppins', sans-serif;
}

.tab-item p {
  color: var(--gray);
  font-size: 14.5px;
  margin: 0;
  line-height: 1.65;
}

/* ==========================================================================
   Audience Cards Section (Section 8)
   ========================================================================== */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.audience-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  height: 250px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  display: flex;
  align-items: flex-end;
  padding: 28px;
  color: #fff;
  transition: transform var(--transition), box-shadow var(--transition);
}

.audience-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(18, 173, 168, 0.45), transparent 65%);
  transition: opacity var(--transition);
}

.audience-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.audience-card:hover::after {
  opacity: 0.85;
}

.audience-card .txt {
  position: relative;
  z-index: 2;
}

.audience-card h4 {
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.audience-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.6;
}

/* ==========================================================================
   Editor Quote Block (Section 10)
   ========================================================================== */
.quote-block {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.quote-block p {
  font-size: 26px;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 24px;
  font-style: italic;
}

.quote-block .who {
  color: var(--gray);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Stats Counter Band (Section 11)
   ========================================================================== */
.stats-band {
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  border-radius: var(--radius);
  padding: 64px 40px;
  box-shadow: 0 16px 40px rgba(11, 37, 69, 0.15);
  position: relative;
  overflow: hidden;
}

.stats-band::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.15), transparent 70%);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.stat .num {
  font-size: 52px;
  font-weight: 800;
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  line-height: 1.1;
  margin-bottom: 8px;
}

.stat .lbl {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
}

/* ==========================================================================
   eDiscovery Lifecycle Section (EDRM Interactive Workflow - Enterprise SaaS Polish)
   ========================================================================== */
.ediscovery-lifecycle-section {
  background: linear-gradient(180deg, #071B38 0%, #0B2345 50%, #0F2D50 100%);
  background-image: radial-gradient(rgba(18, 173, 168, 0.12) 1px, transparent 1px), linear-gradient(180deg, #071B38 0%, #0B2345 50%, #0F2D50 100%);
  background-size: 32px 32px, 100% 100%;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  padding: 64px 0 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(37, 211, 196, 0.20);
}

.lifecycle-bg-glow {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 350px;
  background: radial-gradient(ellipse at center, rgba(37, 211, 196, 0.12) 0%, rgba(7, 27, 56, 0) 70%);
  pointer-events: none;
}

.ediscovery-lifecycle-section .badge-pill-glow {
  background: rgba(18, 173, 168, 0.14);
  color: #48E5E0;
  border: 1px solid rgba(18, 173, 168, 0.3);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ediscovery-lifecycle-section .title-gradient {
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  background: none;
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.25;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.ediscovery-lifecycle-section .title-gradient .highlight-teal {
  color: #48E5E0;
  background: linear-gradient(135deg, #48E5E0 0%, #12ADA8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ediscovery-lifecycle-section .section-lead-desc {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 660px;
  margin: 0 auto 12px;
}

.lifecycle-timeline-wrapper {
  position: relative;
  margin-top: 36px;
  margin-bottom: 28px;
}

/* Glowing Workflow Connector Line with Pulse Flow */
.timeline-track-line {
  position: absolute;
  top: 62px;
  transform: translateY(-50%);
  left: calc(100% / 14);
  right: calc(100% / 14);
  height: 3px;
  background: rgba(37, 211, 196, 0.35);
  opacity: 0.8;
  box-shadow: 0 0 10px rgba(72, 229, 224, 0.4);
  z-index: 1;
  border-radius: 2px;
}

.timeline-progress-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(37, 211, 196, 0.3) 0%, rgba(72, 229, 224, 0.9) 50%, rgba(37, 211, 196, 0.3) 100%);
  border-radius: 2px;
  background-size: 200% 100%;
  animation: pulseFlow 3s linear infinite;
}

@keyframes pulseFlow {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 200% 0%;
  }
}

.timeline-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #48E5E0;
  box-shadow: 0 0 8px rgba(72, 229, 224, 0.85);
  z-index: 2;
}

.dot-1 {
  left: 14.28%;
}

.dot-2 {
  left: 28.57%;
}

.dot-3 {
  left: 42.85%;
}

.dot-4 {
  left: 57.14%;
}

.dot-5 {
  left: 71.42%;
}

.dot-6 {
  left: 85.71%;
}

/* 7 Lifecycle Stages Grid */
.lifecycle-stages-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  position: relative;
  z-index: 2;
}

.lifecycle-stage-card {
  border-radius: 14px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 195px;
  background: linear-gradient(145deg, rgba(15, 38, 70, 0.75), rgba(9, 25, 48, 0.9));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.stage-card-alt-1 {
  background: linear-gradient(145deg, rgba(15, 38, 70, 0.85), rgba(9, 25, 48, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stage-card-alt-2 {
  background: linear-gradient(145deg, rgba(18, 173, 168, 0.08), rgba(9, 25, 48, 0.9));
  border: 1px solid rgba(37, 211, 196, 0.25);
}

.stage-number-badge {
  font-size: 9.5px;
  font-weight: 800;
  color: #48E5E0;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  background: rgba(18, 173, 168, 0.18);
  padding: 2px 7px;
  border-radius: 12px;
  border: 1px solid rgba(18, 173, 168, 0.3);
}

.stage-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #071931;
  border: 1px solid rgba(37, 211, 196, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #48E5E0;
  margin-bottom: 10px;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 3;
}

.stage-phase-tag {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 3px;
  font-weight: 600;
}

.lifecycle-stage-card h3 {
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.25;
  min-height: 34px;
  display: flex;
  align-items: flex-start;
}

.lifecycle-stage-card p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11.5px;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hover & Focus Animations */
.lifecycle-stage-card:hover {
  transform: translateY(-4px);
  border-color: rgba(18, 173, 168, 0.5);
  box-shadow: 0 12px 28px rgba(18, 173, 168, 0.22), 0 0 16px rgba(18, 173, 168, 0.12);
}

.lifecycle-stage-card:focus-visible {
  outline: 2px solid #48E5E0;
  outline-offset: 2px;
}

.lifecycle-stage-card:hover .stage-icon-wrap {
  background: #12ADA8;
  color: #FFFFFF;
  border-color: #12ADA8;
}

/* Premium Information Box */
.lifecycle-geo-note {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 4px solid #12ADA8;
  border-radius: 12px;
  padding: 14px 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
  max-width: 960px;
  margin: 0 auto 20px;
}

.geo-note-icon {
  flex-shrink: 0;
}

/* CTA Row Below Workflow */
.lifecycle-cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-lifecycle-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 30px;
  background: linear-gradient(135deg, #12ADA8 0%, #0C8B87 100%);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 20px rgba(18, 173, 168, 0.35);
}

.btn-lifecycle-cta:focus-visible {
  outline: 2px solid #48E5E0;
  outline-offset: 3px;
}

.btn-lifecycle-cta:hover {
  background: linear-gradient(135deg, #48E5E0 0%, #12ADA8 100%);
  color: #071931;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(18, 173, 168, 0.5);
}

.btn-lifecycle-cta svg {
  transition: transform 250ms ease;
}

.btn-lifecycle-cta:hover svg {
  transform: translateX(5px);
}

.geo-note-icon {
  flex-shrink: 0;
}

/* ==========================================================================
   Footer (Section 13 & 20/21 Requirements - Darker Distinct #061A33)
   ========================================================================== */
/* ==========================================================================
   Footer (Section 13 & 20/21 Requirements - Enterprise SaaS Polish)
   ========================================================================== */
footer.site-footer {
  background: #061A33;
  color: rgba(255, 255, 255, 0.85);
  padding: 32px 0 0;
  border-top: 1px solid rgba(37, 211, 196, 0.20);
  position: relative;
  overflow: hidden;
}

footer.site-footer .container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

footer.site-footer::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.06) 0%, rgba(18, 173, 168, 0) 70%);
  pointer-events: none;
}

/* SECTION 1: Full-Width Newsletter CTA (Flexible Left / Right) */
.footer-newsletter {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 14px;
  padding: 24px 32px;
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  position: relative;
  z-index: 2;
}

.newsletter-content {
  flex: 1 1 auto;
  min-width: 0;
}

.newsletter-heading {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.newsletter-desc {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13.5px;
  margin: 0;
  line-height: 1.45;
  max-width: 580px;
}

.newsletter-action {
  flex: 0 0 auto;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.newsletter-form {
  display: flex;
  gap: 8px;
  width: 100%;
}

.newsletter-form input[type="email"] {
  padding: 9px 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  outline: none;
  font-size: 13px;
  flex-grow: 1;
  font-family: inherit;
  transition: all var(--transition);
}

.newsletter-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.newsletter-form input[type="email"]:focus {
  border-color: #12ADA8;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 12px rgba(18, 173, 168, 0.35);
}

.btn-subscribe {
  padding: 9px 18px;
  border-radius: 24px;
  background: #12ADA8;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
  box-shadow: 0 4px 12px rgba(18, 173, 168, 0.3);
  flex-shrink: 0;
}

.btn-subscribe:hover {
  background: #0C8B87;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(18, 173, 168, 0.45);
}

.newsletter-trust-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
  padding-left: 4px;
}

.newsletter-trust-note svg {
  color: #12ADA8;
  flex-shrink: 0;
}

/* SECTION 2: Responsive 4-Column Grid (36% | 21% | 21% | 22%) */
.footer-top {
  display: grid;
  grid-template-columns: 36% 21% 21% 22%;
  gap: 28px;
  align-items: start;
  padding-bottom: 28px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-brand-col .logo {
  color: #FFFFFF;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer-brand-col .logo .brand-text {
  color: #FFFFFF !important;
  font-size: 17px;
  font-weight: 700;
}

.footer-brand-col .logo .brand-hl {
  color: #48E5E0 !important;
}

.footer-brand-col .logo .mark {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(18, 173, 168, 0.45)) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
}

.footer-desc {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 14px;
  max-width: 350px;
  text-align: justify;
}

.footer-founder-info {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 12px;
  border-radius: 8px;
  width: 100%;
  max-width: 350px;
}

.founder-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}

.founder-name {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
}

.founder-title {
  font-size: 11.5px;
  color: #48E5E0;
  font-weight: 500;
}

.social-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.social-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: all var(--transition);
  text-decoration: none;
  flex-shrink: 0;
}

.social-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  display: block;
}

.social-btn:hover {
  background: #12ADA8;
  border-color: #12ADA8;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(18, 173, 168, 0.4);
}

.footer-heading {
  color: #FFFFFF;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0;
  margin-bottom: 14px;
  font-weight: 700;
  position: relative;
  display: inline-block;
  line-height: 1.2;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 22px;
  height: 2px;
  background: #12ADA8;
  border-radius: 2px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links li {
  margin: 0;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.5;
  transition: all 250ms ease;
  display: inline-block;
}

.footer-links a:hover {
  color: #12ADA8;
  transform: translateX(4px);
}

/* SECTION 3: SEO Popular Topics Row */
.footer-seo {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  text-align: center;
}

.seo-title {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}

.seo-links-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.seo-links-list a {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  transition: all var(--transition);
}

.seo-links-list a:hover {
  color: #48E5E0;
  text-decoration: underline;
  text-shadow: 0 0 8px rgba(72, 229, 224, 0.3);
}

.seo-links-list .sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
}

/* SECTION 4: Bottom Bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
}

.footer-bottom .copyright {
  color: rgba(255, 255, 255, 0.65);
}

.trust-badge-bar {
  color: rgba(255, 255, 255, 0.55);
}

.trust-badge-bar .sep {
  color: #12ADA8;
  margin: 0 6px;
}

.trust-badge-bar {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.trust-badge-bar .sep {
  color: #12ADA8;
  margin: 0 6px;
}

.footer-bottom .legal-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition);
}

.footer-bottom a:hover {
  color: #48E5E0;
  text-shadow: 0 0 8px rgba(72, 229, 224, 0.3);
}

.footer-bottom .sep {
  color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   Blog Listing & Filtering (Section 14 & 20)
   ========================================================================== */
.page-head {
  text-align: center;
  padding: 80px 0 30px;
}

.page-head h1 {
  font-size: 46px;
}

.page-head p {
  color: var(--gray);
  max-width: 600px;
  margin: 16px auto 0;
  font-size: 18px;
}

.filter-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 0 60px;
}

.filter-bar button {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 9.5px 22px;
  border-radius: 50px;
  border: 1.5px solid #CBD5E1;
  background: #FFFFFF;
  font-weight: 600;
  font-size: 13.5px;
  color: #334155;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 45, 82, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-bar button:hover {
  border: 1.5px solid #12ADA8;
  color: #0C8B87;
  background: rgba(18, 173, 168, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(18, 173, 168, 0.15);
}

.filter-bar button.active {
  background: linear-gradient(135deg, #0B2545, #12ADA8);
  color: #FFFFFF;
  border: 1.5px solid #12ADA8;
  box-shadow: 0 6px 18px rgba(18, 173, 168, 0.35);
}

/* ==========================================================================
   Flagship SaaS Product Showcase \u2014 Featured Legal AI & eDiscovery Tools
   Inspired by Relativity, Everlaw, OpenAI, Notion & Vanta Design Systems
   ========================================================================== */
.saas-showcase-section {
  position: relative;
  background: linear-gradient(180deg, #F8FAFC 0%, #F0FDFA 45%, #F8FAFC 100%);
  padding: 100px 0 110px;
  overflow: hidden;
}

.relative-z {
  position: relative;
  z-index: 2;
}

/* Background Animated Orbs & Grid Overlay */
.saas-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

.saas-bg-glow.glow-1 {
  width: 500px;
  height: 500px;
  top: -100px;
  left: -100px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.22), rgba(255, 255, 255, 0));
  animation: floatGlow 12s ease-in-out infinite alternate;
}

.saas-bg-glow.glow-2 {
  width: 600px;
  height: 600px;
  bottom: -150px;
  right: -100px;
  background: radial-gradient(circle, rgba(11, 37, 69, 0.15), rgba(18, 173, 168, 0.08));
  animation: floatGlow 16s ease-in-out infinite alternate-reverse;
}

.saas-bg-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(18, 173, 168, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.45;
  pointer-events: none;
  z-index: 1;
}

@keyframes floatGlow {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(40px, 30px) scale(1.1);
  }
}

/* Header Styling */
.section-head.centered {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}

.badge-pill-glow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-dark);
  background: rgba(18, 173, 168, 0.1);
  padding: 6px 16px;
  border-radius: 30px;
  border: 1px solid rgba(18, 173, 168, 0.28);
  margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.12);
}

.badge-pill-glow .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px var(--teal);
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.6;
  }
}

.title-gradient {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%, var(--teal-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
  line-height: 1.2;
}

.section-lead-desc {
  font-size: 16.5px;
  color: #475569;
  line-height: 1.7;
  margin: 0 auto;
}

/* SaaS Grid & Card Components */
.saas-grid,
.featured-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.tool-card.saas {
  background: var(--white);
  border-radius: 18px;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  padding: 28px 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 20px rgba(11, 37, 69, 0.03);
}

/* Flagship Cards Highlight */
.tool-card.saas.flagship {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDFA 100%);
  border-color: rgba(18, 173, 168, 0.4);
  box-shadow: 0 10px 30px rgba(18, 173, 168, 0.08);
}

.tool-card.saas.flagship::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), #00D2C8, var(--navy));
}

.flagship-ribbon {
  position: absolute;
  top: 14px;
  right: -32px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--teal-dark), var(--navy));
  color: var(--white);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 34px;
  box-shadow: 0 4px 10px rgba(11, 37, 69, 0.15);
  pointer-events: none;
  z-index: 3;
}

.tool-card.saas:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(18, 173, 168, 0.5);
  box-shadow: 0 20px 45px rgba(18, 173, 168, 0.16), 0 6px 16px rgba(11, 37, 69, 0.06);
}

.tool-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.tool-icon-saas {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(18, 173, 168, 0.14), rgba(11, 37, 69, 0.06));
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.tool-card.saas:hover .tool-icon-saas {
  background: linear-gradient(135deg, var(--teal), var(--navy));
  color: var(--white);
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 8px 20px rgba(18, 173, 168, 0.32);
}

/* Category Tags */
.tool-cat-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 14px;
}

.tool-cat-tag.ai-legal {
  color: #0C8B87;
  background: #E6FFFA;
  border: 1px solid rgba(12, 139, 135, 0.25);
}

.tool-cat-tag.privacy {
  color: #7C3AED;
  background: #F3E8FF;
  border: 1px solid rgba(124, 58, 237, 0.22);
}

.tool-cat-tag.ediscovery {
  color: #0284C7;
  background: #E0F2FE;
  border: 1px solid rgba(2, 132, 199, 0.22);
}

.tool-cat-tag.investigation {
  color: #059669;
  background: #D1FAE5;
  border: 1px solid rgba(5, 150, 105, 0.22);
}

.tool-cat-tag.compliance {
  color: #D97706;
  background: #FEF3C7;
  border: 1px solid rgba(217, 119, 6, 0.25);
}

.tool-card-content h3 {
  font-size: 18.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.tool-card.saas:hover .tool-card-content h3 {
  color: var(--teal-dark);
}

.tool-card-content p {
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 18px;
  flex-grow: 1;
}

/* Visual Metric Row */
.tool-metrics-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(241, 245, 249, 0.8);
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 10.5px;
  font-weight: 600;
  color: #334155;
  justify-content: space-between;
  overflow: hidden;
}

.tool-metrics-row span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* CTA Launch Button */
.btn-launch-saas {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 18px;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-launch-saas svg {
  transition: transform 0.25s ease, stroke 0.25s ease;
  stroke: var(--teal);
}

.tool-card.saas:hover .btn-launch-saas,
.btn-launch-saas:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(18, 173, 168, 0.35);
}

.tool-card.saas:hover .btn-launch-saas svg,
.btn-launch-saas:hover svg {
  transform: translateX(5px);
  stroke: var(--white);
}

/* Section-Wide CTA Banner */
.saas-cta-banner {
  position: relative;
  background: linear-gradient(135deg, #0B2545 0%, #123163 60%, #0C8B87 100%);
  border-radius: 20px;
  padding: 44px 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(11, 37, 69, 0.22);
}

.saas-cta-glow-accent {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.4), transparent 70%);
  pointer-events: none;
}

.saas-cta-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A2E8F6;
  margin-bottom: 8px;
}

.saas-cta-content h3 {
  color: var(--white);
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 10px;
}

.saas-cta-content p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  max-width: 620px;
}

.saas-cta-actions {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.btn.lg {
  padding: 16px 32px;
  font-size: 14px;
}

.btn.glow {
  box-shadow: 0 8px 24px rgba(18, 173, 168, 0.4);
}

.btn.outline.white {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}

.btn.outline.white:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--white);
}

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

@media (max-width: 860px) {
  .saas-cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 36px 28px;
  }

  .saas-cta-content p {
    max-width: 100%;
  }

  .saas-cta-actions {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .saas-grid {
    grid-template-columns: 1fr;
  }

  .title-gradient {
    font-size: 32px;
  }
}

/* Tools Directory Grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 0;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 60px;
  margin-bottom: 80px;
  flex-wrap: wrap;
}

.tool-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.tool-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal);
  box-shadow: 0 12px 28px rgba(11, 37, 69, 0.08);
}

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

.tool-cat-badge {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-dark);
  background: #F0FDFA;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(18, 173, 168, 0.25);
}

.tool-card h3 {
  font-size: 19px;
  color: var(--navy);
  margin-bottom: 10px;
}

.tool-card p {
  color: var(--gray);
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 20px;
  flex-grow: 1;
}

.tool-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #F1F5F9;
  padding-top: 16px;
}

.tool-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.tool-link:hover {
  color: var(--teal);
}

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

.post-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  border: 1.5px solid rgba(18, 173, 168, 0.45);
  box-shadow: 0 4px 18px rgba(11, 37, 69, 0.05);
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--teal);
}

.post-thumb {
  height: 210px;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  position: relative;
  overflow: hidden;
}

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

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

.post-body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.post-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
  color: var(--gray);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.post-meta .cat {
  color: var(--teal-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(18, 173, 168, 0.1);
  padding: 3px 10px;
  border-radius: 12px;
}

.post-meta .author {
  color: var(--navy);
  font-weight: 600;
}

.post-card h3 {
  font-size: 20px;
  margin-bottom: 14px;
  line-height: 1.35;
  color: var(--navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card p.summary {
  color: var(--gray);
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 20px;
  flex-grow: 1;
  text-align: left !important;
}

.post-card .rm {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--teal-dark);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.post-card:hover .rm {
  color: var(--teal);
}

.pagination a {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
}

.pagination a:hover {
  border-color: var(--navy);
  background: var(--bg-accent, #f8fafc);
}

.pagination a.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.pagination .pagination-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 4px;
  font-weight: 700;
  color: var(--slate);
}

/* ==========================================================================
   Single Blog Post Article Template (Section 15)
   ========================================================================== */
/* ==========================================================================
   Single Blog Post Article Header Styling (Enhanced Title & Meta Formatting)
   ========================================================================== */
.single-post-header {
  position: relative;
  max-width: 1040px !important;
  margin: 28px auto 36px auto !important;
  padding: 36px 28px 32px 28px !important;
  text-align: center !important;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, rgba(255, 255, 255, 0.5) 100%);
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 4px 20px rgba(11, 37, 69, 0.03);
  overflow: hidden;
}

.single-post-header::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 280px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.09) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.single-post-header > * {
  position: relative;
  z-index: 1;
}

/* Category Pill Badge */
.cat-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #E6FFFA 0%, #CCFBF1 100%) !important;
  color: #0C8B87 !important;
  border: 1px solid rgba(18, 173, 168, 0.35) !important;
  border-radius: 9999px !important;
  padding: 6px 20px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px rgba(18, 173, 168, 0.12) !important;
  margin-bottom: 14px !important;
  transition: all 0.25s ease !important;
}

.cat-tag:hover {
  background: #CCFBF1 !important;
  border-color: #0C8B87 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(18, 173, 168, 0.2) !important;
}

/* Single Post Main Headline Title */
.single-post-header h1 {
  font-size: clamp(1.9rem, 3.2vw + 0.4rem, 2.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.025em !important;
  color: #0F172A !important;
  margin: 14px auto 22px auto !important;
  max-width: 920px !important;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
}

/* Single Post Meta Container */
.single-post-meta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  padding: 10px 28px !important;
  margin-top: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 50px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
  font-size: 0.82rem !important;
  color: #64748B !important;
}

/* Hide raw inline pipe spans '|' */
.single-post-meta > span[style*="CBD5E1"] {
  display: none !important;
}

/* Styling for post meta items */
.single-post-meta > span:not([style*="CBD5E1"]) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #475569 !important;
  font-weight: 500 !important;
}

/* Date Icon (Span 1) */
.single-post-meta > span:not([style*="CBD5E1"]):nth-of-type(1)::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%230C8B87' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
}

/* Author Icon (Span 3) */
.single-post-meta > span:not([style*="CBD5E1"]):nth-of-type(3)::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%230C8B87' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
}

/* Read Time Icon (Span 5) */
.single-post-meta > span:not([style*="CBD5E1"]):nth-of-type(5)::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%230C8B87' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
}

.single-post-meta > span:not([style*="CBD5E1"]):not(:last-child)::after {
  content: "\u2022";
  margin-left: 14px;
  color: #CBD5E1;
  font-weight: 700;
  font-size: 0.9rem;
}

.single-post-meta strong {
  color: #0F172A !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  .single-post-header {
    margin: 16px auto 24px auto !important;
    padding: 24px 16px 20px 16px !important;
    border-radius: 14px !important;
  }
  .single-post-header h1 {
    font-size: 1.65rem !important;
    margin: 10px auto 16px auto !important;
    line-height: 1.3 !important;
  }
  .single-post-meta {
    padding: 8px 18px !important;
    gap: 10px !important;
    border-radius: 12px !important;
    font-size: 0.78rem !important;
  }
  .single-post-meta > span:not([style*="CBD5E1"]):not(:last-child)::after {
    margin-left: 8px !important;
  }
}

.single-post-hero-img {
  max-width: 1040px;
  margin: 0 auto 40px;
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 520px;
  box-shadow: var(--shadow);
}

.single-post-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-content {
  max-width: 940px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.8;
  color: var(--text);
}

.article-lead {
  font-size: 19.5px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--navy);
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--bg-light);
}


.article-content h2 {
  font-size: 26px;
  margin: 40px 0 16px;
  color: var(--navy);
}

.article-content h3 {
  font-size: 20px;
  margin: 28px 0 12px;
  color: var(--navy);
}

.article-content>p {
  margin-bottom: 22px;
  text-align: justify;
}

.article-content ul,
.article-content ol {
  margin: 0 0 24px 24px;
  padding: 0;
  font-size: 17px;
}

.article-content>ul>li,
.article-content>ol>li {
  margin-bottom: 10px;
  text-align: justify;
  line-height: 1.75;
}

/* Left-accented in-article related callout box (Section 15) */
.article-callout {
  margin: 40px 0;
  padding: 24px 28px;
  background: var(--bg-light);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.article-callout .callout-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-dark);
  margin-bottom: 6px;
  display: block;
}

.article-callout a {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
}

.article-callout a:hover {
  color: var(--teal-dark);
}

.article-footer-nav {
  max-width: 940px;
  margin: 60px auto 40px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
}

.back-link:hover {
  color: var(--teal);
}

/* Article Share Box & Brand Color Hover Buttons */
.article-share-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.share-label {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gray);
}

.share-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  border: 1px solid var(--border);
}

.share-btn:hover {
  transform: translateY(-2px);
  color: var(--white) !important;
  box-shadow: 0 4px 12px rgba(11, 37, 69, 0.15);
}

.share-btn.linkedin:hover {
  background: #0A66C2;
  border-color: #0A66C2;
}

.share-btn.twitter:hover {
  background: #000000;
  border-color: #000000;
}

.share-btn.whatsapp:hover {
  background: #25D366;
  border-color: #25D366;
}

.share-btn.facebook:hover {
  background: #1877F2;
  border-color: #1877F2;
}

.share-btn.instagram:hover {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  border-color: #dc2743;
}

.related-posts-section {
  padding: 60px 0 90px;
  background: var(--bg-light);
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   Static Pages (About, Contact, Privacy, Terms, Disclaimer - Section 17)
   ========================================================================== */
.page-content {
  max-width: 840px;
  margin: 0 auto;
  padding: 40px 0 80px;
  font-size: 17px;
  line-height: 1.8;
}

.page-content>p,
.page-content>ul>li,
.page-content>ol>li,
.page-content>div:not(.cards-3):not(.feature-card):not(.contact-layout) p,
.page-content>div:not(.cards-3):not(.feature-card):not(.contact-layout) li {
  text-align: justify;
}

.page-content h2 {
  font-size: 26px;
  margin: 40px 0 16px;
}

.page-content h3 {
  font-size: 20px;
  margin: 28px 0 12px;
}

/* Contact Page Form & Layout */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 50px;
  max-width: 1080px;
  margin: 40px auto 90px;
}

.contact-info-card {
  background: var(--bg-light);
  padding: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.contact-info-card h3 {
  font-size: 22px;
  margin-bottom: 16px;
}

.contact-info-card p {
  color: var(--gray);
  margin-bottom: 24px;
  text-align: left !important;
}

.contact-item {
  margin-bottom: 20px;
}

.contact-item strong {
  display: block;
  color: var(--navy);
  font-size: 14.5px;
  margin-bottom: 4px;
}

.contact-item span {
  color: var(--gray);
  font-size: 15px;
}

.form-box {
  background: var(--white);
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.form-group {
  margin-bottom: 22px;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg-light);
  transition: border-color var(--transition), background var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--white);
}

.privacy-reassurance {
  font-size: 13px;
  color: var(--gray);
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   Responsive Breakpoints (Section 16 - Confirmed at 980px and 640px)
   ========================================================================== */
@media (max-width: 980px) {

  .cards-3,
  .tab-grid,
  .footer-top,
  .post-grid {
    grid-template-columns: 1fr 1fr;
  }

  .audience-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  nav.main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    padding: 24px;
    box-shadow: 0 14px 28px rgba(11, 37, 69, 0.12);
    border-bottom: 1px solid var(--border);
    max-height: 80vh;
    overflow-y: auto;
  }

  nav.main-nav ul {
    flex-direction: column;
    gap: 18px;
  }

  nav.main-nav ul li.has-megamenu,
  nav.main-nav ul li.has-dropdown {
    position: relative;
  }

  .dropdown-menu,
  ul.dropdown-menu {
    position: static !important;
    transform: none !important;
    left: 0 !important;
    min-width: 100% !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 8px 0 8px 12px !important;
  }

  .megamenu-panel {
    position: static;
    box-shadow: none;
    padding: 16px 0;
    max-height: none;
    border-bottom: none;
    border-top: none;
    background: transparent;
  }

  .megamenu-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0;
  }

  .menu-toggle {
    display: block;
  }

  .hero h1 {
    font-size: 46px;
  }

  .single-post-header h1 {
    font-size: 36px;
  }
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 38px;
    /* Confirmed ~40px mobile per Section 3 */
  }

  .cards-3,
  .tab-grid,
  .audience-grid,
  .post-grid,
  .footer-top {
    grid-template-columns: 1fr;
  }

  .section {
    padding: var(--section-pad-mobile) 0;
  }

  .trust-logos {
    gap: 20px;
  }

  .trust-logos span:not(:last-child)::after {
    display: none;
  }

  .single-post-header h1 {
    font-size: 30px;
  }

  .form-box,
  .contact-info-card {
    padding: 24px;
  }
}

/* ==========================================================================
   SaaS & LegalTech Hero Section \u2014 Modern Two-Column Layout & Visual Mockup
   ========================================================================== */

/* ==========================================================================
   Enterprise LegalTech & SaaS Hero Section \u2014 Final Optimized System
   Colors: Primary Navy #0F2D52, Primary Teal #1FB5B3, Secondary Teal #4FD1C5, Light #F7FAFC
   ========================================================================== */

/* ==========================================================================
   Enterprise LegalTech Hero Section \u2014 Final UX & Visual Hierarchy Balance
   Colors: Primary Navy #0F2D52, Primary Teal #1FB5B3, Secondary Teal #4FD1C5, Light #F7FAFC
   ========================================================================== */

.hero-enterprise-section {
  position: relative;
  /* Dark slate gradient matching v-product-hero */
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  padding: 32px 0 40px;
  overflow: hidden;
  color: #FFFFFF;
}

/* Ecosystem Dashboard Specific Tags & Tool Metrics */
.top-tool-card {
  padding: 12px 14px;
}

.icon-cyan-glow {
  background: rgba(34, 211, 238, 0.2);
  color: #22D3EE;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid rgba(34, 211, 238, 0.35);
}

.fill-cyan {
  background: linear-gradient(90deg, #22D3EE, #1FB5B3);
}

.tool-status-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 11.5px;
}

.card-metrics-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.metric-status-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  width: fit-content;
}

.tag-warning {
  background: rgba(245, 158, 11, 0.18);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.tag-info {
  background: rgba(59, 130, 246, 0.18);
  color: #60A5FA;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.tag-teal {
  background: rgba(31, 181, 179, 0.18);
  color: #4FD1C5;
  border: 1px solid rgba(31, 181, 179, 0.3);
}

.tag-purple {
  background: rgba(168, 85, 247, 0.18);
  color: #C084FC;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.tag-amber {
  background: rgba(245, 158, 11, 0.18);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.tag-blue {
  background: rgba(59, 130, 246, 0.18);
  color: #60A5FA;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.tag-red {
  background: rgba(239, 68, 68, 0.18);
  color: #F87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.metric-value-text {
  font-size: 11px;
  font-weight: 600;
  color: #E2E8F0;
}

.mini-progress-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10.5px;
  color: #CBD5E1;
}

.mini-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.mini-fill {
  height: 100%;
  background: #1FB5B3;
  border-radius: 2px;
}

.small-pii-panel {
  padding: 8px 12px;
  margin-top: 6px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.pii-panel-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #F87171;
  margin-top: 4px;
}

.badge-red-pulse {
  font-size: 10px;
  background: rgba(239, 68, 68, 0.2);
  color: #FCA5A5;
  padding: 2px 6px;
  border-radius: 8px;
}

/* Background Atmosphere & Mesh */
.hero-ent-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.35;
  z-index: 1;
}

.glow-teal-primary {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(31, 181, 179, 0.35) 0%, rgba(15, 45, 82, 0) 70%);
  top: -90px;
  right: -30px;
  animation: heroPulse 8s ease-in-out infinite alternate;
}

.glow-teal-secondary {
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(79, 209, 197, 0.22) 0%, rgba(15, 45, 82, 0) 70%);
  bottom: -130px;
  left: -90px;
}

.hero-ent-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 1;
}

.hero-enterprise-section .container {
  position: relative;
  z-index: 2;
}

/* Two-Column Enterprise Grid \u2014 Rebalanced Optical Alignment & Ratio */
.hero-ent-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: center;
}

/* Left Column Styling \u2014 Visually Balanced & Center-Aligned Product Hero Layout */
.hero-ent-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  align-self: center;
  max-width: 640px;
  width: 100%;
}

.hero-ent-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: linear-gradient(135deg, rgba(31, 181, 179, 0.18) 0%, rgba(15, 45, 82, 0.5) 100%);
  border: 1px solid rgba(79, 209, 197, 0.4);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #4FD1C5;
  margin-bottom: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(31, 181, 179, 0.15);
  transition: all 0.3s ease;
}

.hero-ent-badge:hover {
  border-color: #1FB5B3;
  box-shadow: 0 4px 20px rgba(31, 181, 179, 0.3);
  transform: translateY(-1px);
}

.badge-icon {
  font-size: 13px;
  display: inline-block;
  line-height: 1;
}

.hero-ent-title {
  font-size: clamp(32px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  color: #FFFFFF;
  margin-bottom: 18px;
  letter-spacing: -0.025em;
  text-align: center;
  max-width: 100%;
}

.hero-ent-accent {
  color: #1FB5B3;
  background: linear-gradient(135deg, #22D3EE 0%, #1FB5B3 50%, #4FD1C5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  filter: drop-shadow(0 2px 8px rgba(31, 181, 179, 0.2));
}

.hero-ent-subtitle {
  font-size: 15.5px;
  line-height: 1.68;
  color: #CBD5E1;
  margin-bottom: 26px;
  max-width: 100%;
  text-align: center;
}

.hero-value-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 30px;
  width: 100%;
  max-width: 100%;
}

.hero-val-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 35, 64, 0.7);
  color: #4FD1C5;
  border: 1px solid rgba(31, 181, 179, 0.32);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  width: 100%;
  box-sizing: border-box;
}

.hero-val-badge svg {
  color: #1FB5B3;
  transition: transform 0.25s ease, color 0.25s ease;
  flex-shrink: 0;
}

.hero-val-badge:hover {
  background: rgba(31, 181, 179, 0.22);
  border-color: #4FD1C5;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(31, 181, 179, 0.35);
}

.hero-val-badge:hover svg {
  color: #FFFFFF;
  transform: scale(1.15);
}

/* CTAs & Trust Block */
.hero-ent-cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  width: 100%;
}

.hero-ent-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.btn-ent-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: linear-gradient(135deg, #1FB5B3 0%, #179391 100%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 8px 22px rgba(31, 181, 179, 0.4);
  transition: all 0.3s ease;
}

.btn-ent-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(31, 181, 179, 0.55);
  color: #FFFFFF;
}

.btn-ent-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.08);
  color: #F1F5F9;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.btn-ent-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.42);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.hero-trust-statement-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}

.trust-statement-text {
  font-size: 12.5px;
  color: #CBD5E1;
  text-align: center;
}

/* Trusted Topics \u2014 Content Pillars Navigation Showcase */
.hero-integrated-topics {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding-top: 24px;
  border-top: 1px solid rgba(31, 181, 179, 0.25);
  position: relative;
  text-align: center;
}

.hero-integrated-topics::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #4FD1C5 50%, transparent 100%);
}

.topics-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #4FD1C5;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.topics-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22D3EE;
  box-shadow: 0 0 8px #22D3EE;
}

.topics-cards-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.topics-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  width: 100%;
}

.topic-pillar-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  background: rgba(15, 34, 64, 0.75);
  border: 1px solid rgba(31, 181, 179, 0.3);
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: #E2E8F0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.topic-pillar-card:hover {
  background: rgba(31, 181, 179, 0.24);
  border-color: #4FD1C5;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(31, 181, 179, 0.35);
}

.topic-icon-wrap {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(31, 181, 179, 0.22);
  border: 1px solid rgba(31, 181, 179, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.topic-pillar-card:hover .topic-icon-wrap {
  background: rgba(31, 181, 179, 0.45);
  border-color: #4FD1C5;
}

.pillar-icon {
  color: #4FD1C5;
  flex-shrink: 0;
}

.topic-pillar-card:hover .pillar-icon {
  color: #FFFFFF;
}

.cat-count-badge {
  font-size: 10px;
  font-weight: 700;
  color: #4FD1C5;
  background: rgba(31, 181, 179, 0.22);
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid rgba(31, 181, 179, 0.3);
  margin-left: 2px;
}

.topic-pillar-card:hover .cat-count-badge {
  color: #FFFFFF;
  background: rgba(31, 181, 179, 0.4);
  border-color: #4FD1C5;
}

/* Right Column Showcase Visual Graphic Frame (Clean White & Teal Enterprise Theme) */
.hero-ent-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
  width: 100%;
  height: 100%;
  margin: auto 0;
}

.dashboard-mockup-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-ent-visual:hover .dashboard-mockup-wrapper {
  transform: translateY(-6px) rotateX(1.5deg) rotateY(-1.5deg);
}

.app-ui-mockup-frame {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(11, 37, 69, 0.28), 0 0 30px rgba(18, 173, 168, 0.15);
  color: #0F172A;
  font-family: 'Inter', sans-serif;
  text-align: left;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light Sheen Shimmer Overlay on Frame Hover */
.app-ui-mockup-frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

.hero-ent-visual:hover .app-ui-mockup-frame {
  border-color: #12ADA8;
  box-shadow: 0 28px 65px rgba(11, 37, 69, 0.42), 0 0 45px rgba(18, 173, 168, 0.35);
}

.hero-ent-visual:hover .app-ui-mockup-frame::after {
  left: 150%;
}

.app-ui-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
}

.app-brand-logo {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.app-brand-logo img {
  height: 32px;
  width: auto;
  max-width: 300px;
  display: block;
  transition: transform 0.3s ease;
}

.hero-ent-visual:hover .app-brand-logo img {
  transform: scale(1.02);
}

.app-ui-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.airgap-status-pill {
  font-size: 10.5px;
  font-weight: 700;
  color: #047857;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.08);
  transition: all 0.25s ease;
}

.airgap-status-pill:hover {
  background: #D1FAE5;
  border-color: #6EE7B7;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.status-pulse-dot {
  width: 6px;
  height: 6px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
  animation: pulseGreenDot 2s infinite;
}

@keyframes pulseGreenDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.mockup-module-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  overflow-x: auto;
}

.module-tab-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.module-tab-item:hover {
  color: #0C8B87;
  background: rgba(18, 173, 168, 0.14);
  border-color: #12ADA8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(18, 173, 168, 0.15);
}

.module-tab-item.active {
  color: #0C8B87;
  background: rgba(18, 173, 168, 0.12);
  border-color: #12ADA8;
  box-shadow: 0 2px 8px rgba(18, 173, 168, 0.15);
}

.tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dot-hold { background: #12ADA8; }
.dot-analyzer { background: #3B82F6; }
.dot-review { background: #8B5CF6; }
.dot-trial { background: #F59E0B; }

.app-ui-main {
  padding: 16px;
  background: #F1F5F9;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Featured Hero Product Card */
.preview-hero-card {
  background: #FFFFFF;
  border: 1.5px solid #12ADA8;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.preview-hero-card:hover {
  border-color: #0C8B87;
  box-shadow: 0 8px 24px rgba(18, 173, 168, 0.2);
  transform: translateY(-3px);
}

.preview-hero-card:hover .p-bar-fill {
  box-shadow: 0 0 10px rgba(18, 173, 168, 0.6);
}

.p-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.p-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.p-card-icon.icon-teal {
  background: rgba(18, 173, 168, 0.12);
  color: #0C8B87;
}

.p-card-icon.icon-blue {
  background: rgba(59, 130, 246, 0.12);
  color: #2563EB;
}

.p-card-icon.icon-purple {
  background: rgba(139, 92, 246, 0.12);
  color: #7C3AED;
}

.p-card-icon.icon-amber {
  background: rgba(245, 158, 11, 0.12);
  color: #D97706;
}

.p-card-titles {
  flex-grow: 1;
}

.p-title {
  font-size: 13px;
  font-weight: 800;
  color: #0B2545;
  margin: 0;
  line-height: 1.2;
}

.p-sub {
  font-size: 10px;
  color: #64748B;
}

.p-badge-defensible {
  font-size: 9.5px;
  font-weight: 700;
  color: #0C8B87;
  background: rgba(18, 173, 168, 0.12);
  border: 1px solid rgba(18, 173, 168, 0.3);
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.p-card-body {
  background: #F8FAFC;
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid #E2E8F0;
}

.p-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 4px;
}

.p-stat-val {
  color: #0C8B87;
}

.p-bar-track {
  height: 5px;
  background: #E2E8F0;
  border-radius: 3px;
  overflow: hidden;
}

.p-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #12ADA8, #0C8B87);
  border-radius: 3px;
  transition: box-shadow 0.3s ease;
}

/* 2-Column Performance Subgrid */
.preview-subgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.preview-mini-card {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.preview-mini-card:hover {
  border-color: #12ADA8;
  box-shadow: 0 8px 20px rgba(18, 173, 168, 0.18);
  transform: translateY(-3px);
}

.mini-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-card-title {
  font-size: 11px;
  font-weight: 800;
  color: #0B2545;
}

.mini-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mini-tag {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  width: fit-content;
}

.mini-tag.tag-blue {
  background: #EFF6FF;
  color: #2563EB;
  border: 1px solid #BFDBFE;
}

.mini-tag.tag-purple {
  background: #F3E8FF;
  color: #7C3AED;
  border: 1px solid #DDD6FE;
}

.mini-tag.tag-amber {
  background: #FEF3C7;
  color: #D97706;
  border: 1px solid #FDE68A;
}

.mini-tag.tag-teal {
  background: rgba(18, 173, 168, 0.12);
  color: #0C8B87;
  border: 1px solid rgba(18, 173, 168, 0.3);
}

.mini-meta {
  font-size: 9px;
  color: #64748B;
  font-weight: 500;
}

/* Bottom Security Assurance Banner */
.preview-security-banner {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-left: 4px solid #12ADA8;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9.5px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.preview-security-banner:hover {
  border-left-color: #0C8B87;
  border-color: #12ADA8;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.14);
  transform: translateY(-2px);
}

.sec-banner-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #0F172A;
}

.sec-shield-tag {
  font-weight: 700;
  color: #059669;
  background: #D1FAE5;
  border: 1px solid #A7F3D0;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 9px;
}mns: 1fr;
  }
}

.mockup-ent-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.glass-ent-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.glass-ent-card:hover {
  border-color: rgba(31, 181, 179, 0.4);
  background: rgba(255, 255, 255, 0.07);
}

.ai-copilot-card {
  background: linear-gradient(135deg, rgba(31, 181, 179, 0.15) 0%, rgba(15, 45, 82, 0.5) 100%);
  border-color: rgba(31, 181, 179, 0.3);
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .hero-ent-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero-ent-title {
    font-size: clamp(28px, 4vw, 34px);
    max-width: 100%;
  }

  .hero-ent-subtitle {
    max-width: 600px;
  }

  .hero-ent-content {
    text-align: center;
    align-items: center;
    max-width: 100%;
  }

  .hero-value-badges,
  .hero-ent-cta-group,
  .hero-trust-statement-bar,
  .seo-ent-pills,
  .hero-integrated-topics {
    justify-content: center;
    align-items: center;
  }

  .topics-cards-showcase {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .hero-enterprise-section {
    padding: 24px 0 24px;
  }

  .hero-ent-title {
    font-size: 26px;
  }

  .hero-ent-subtitle {
    font-size: 14.5px;
    margin-bottom: 24px;
  }

  .hero-value-badges {
    margin-bottom: 24px;
    gap: 8px;
  }

  .hero-val-badge {
    padding: 7px 14px;
    font-size: 12.5px;
  }
}


.glass-card:hover {
  border-color: rgba(18, 173, 168, 0.4);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Floating Animations */
.float-anim-1 {
  animation: heroFloat 6s ease-in-out infinite;
}

.float-anim-2 {
  animation: heroFloat 7s ease-in-out infinite 1s;
}

.float-anim-3 {
  animation: heroFloat 8s ease-in-out infinite 2s;
}

@keyframes heroFloat {

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

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

@keyframes heroPulse {
  0% {
    transform: scale(1);
    opacity: 0.35;
  }

  100% {
    transform: scale(1.1);
    opacity: 0.55;
  }
}

@keyframes pulseDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(1.3);
  }
}

/* Card Specific Interiors */
.ai-assistant-card {
  background: linear-gradient(135deg, rgba(18, 173, 168, 0.12) 0%, rgba(11, 37, 69, 0.4) 100%);
  border-color: rgba(18, 173, 168, 0.3);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.card-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-sparkle-icon {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #12ADA8 0%, #00D2FF 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

.card-title {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

.card-sub {
  font-size: 10.5px;
  color: #94A3B8;
}

.pill-accuracy {
  font-size: 10.5px;
  font-weight: 700;
  color: #A2E8F6;
  background: rgba(18, 173, 168, 0.2);
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid rgba(18, 173, 168, 0.3);
}

.card-prompt-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.prompt-query {
  font-size: 11.5px;
  color: #E2E8F0;
  font-family: sans-serif;
  font-style: italic;
}

.progress-bar-container {
  height: 5px;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 82%;
  background: linear-gradient(90deg, #12ADA8, #00D2FF);
  border-radius: 10px;
  animation: progressPulse 3s ease-in-out infinite alternate;
}

@keyframes progressPulse {
  0% {
    width: 75%;
  }

  100% {
    width: 92%;
  }
}

.prompt-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #94A3B8;
}

.highlight-stat {
  color: #F87171;
  font-weight: 700;
}

/* Subgrid Layout inside Mockup */
.mockup-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.card-icon-small {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-blue {
  background: rgba(59, 130, 246, 0.2);
  color: #60A5FA;
}

.icon-teal {
  background: rgba(18, 173, 168, 0.2);
  color: #2DD4BF;
}

.icon-purple {
  background: rgba(168, 85, 247, 0.2);
  color: #C084FC;
}

.icon-green {
  background: rgba(34, 197, 94, 0.2);
  color: #4ADE80;
}

.card-mini-title {
  font-size: 12px;
  font-weight: 700;
  color: #E2E8F0;
}

.analysis-stats {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.stat-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

.badge-warning {
  background: rgba(239, 68, 68, 0.2);
  color: #FCA5A5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-success {
  background: rgba(34, 197, 94, 0.2);
  color: #86EFAC;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.clause-match-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.match-info {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #94A3B8;
}

.bar-bg {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: #12ADA8;
  border-radius: 4px;
}

/* Timeline Cards */
.timeline-nodes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: #CBD5E1;
}

.t-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.t-blue {
  background: #60A5FA;
  box-shadow: 0 0 6px #60A5FA;
}

.t-teal {
  background: #2DD4BF;
  box-shadow: 0 0 6px #2DD4BF;
}

.t-time {
  font-size: 9.5px;
  color: #64748B;
  font-family: monospace;
}

.t-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bottom Row */
.mockup-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.mini-graph-visual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-top: 6px;
}

.graph-node {
  font-size: 9.5px;
  font-weight: 600;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #E2E8F0;
  z-index: 2;
}

.node-alert {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #FECACA;
}

.graph-line {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(18, 173, 168, 0.5));
  flex-grow: 1;
}

.compliance-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #CBD5E1;
}

.status-light-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 6px #4ADE80;
}

.compliance-score {
  font-size: 12px;
  font-weight: 700;
  color: #4ADE80;
}

/* Social Proof Band Styling */
.social-proof-saas-band {
  background: #061120;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px 0;
}

.social-proof-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.proof-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #12ADA8;
  white-space: nowrap;
}

.proof-topics-list {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.proof-topic-chip {
  padding: 7px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #E2E8F0;
  transition: all 0.25s ease;
}

.proof-topic-chip:hover {
  background: rgba(18, 173, 168, 0.15);
  border-color: rgba(18, 173, 168, 0.4);
  color: #A2E8F6;
  transform: translateY(-2px);
}

/* Responsive Media Queries for SaaS Hero */
@media (max-width: 1024px) {
  .hero-saas-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-title {
    font-size: 40px;
  }

  .hero-content {
    text-align: center;
    align-items: center;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-trust-signals {
    justify-content: center;
  }

  .hero-seo-block {
    align-items: center;
  }

  .seo-links-wrap {
    justify-content: center;
  }
}

/* ==========================================================================
   Section 6: Core LegalTech Category Hubs (3-Card Showcase Grid)
   ========================================================================== */
.category-hubs-section {
  background: var(--white);
  padding: 90px 0;
}

.cards-3.category-hubs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 10px;
}

.feature-card.hub-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(11, 37, 69, 0.04);
  position: relative;
  overflow: hidden;
}

.feature-card.hub-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal);
  box-shadow: 0 16px 36px rgba(11, 37, 69, 0.1), 0 0 20px rgba(18, 173, 168, 0.08);
}

.hub-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hub-card .icon-container {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(18, 173, 168, 0.08);
  border: 1px solid rgba(18, 173, 168, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--teal-dark);
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.feature-card.hub-card:hover .icon-container {
  background: var(--teal);
  color: #FFFFFF;
  border-color: var(--teal);
  transform: scale(1.05);
}

.hub-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.feature-card.hub-card:hover h3 {
  color: var(--teal-dark);
}

.hub-card p {
  color: #475569;
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 24px;
  margin-top: 0;
}

.card-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 0.25s ease;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
  width: 100%;
}

.feature-card.hub-card:hover .card-cta-link {
  color: var(--teal);
  border-top-color: rgba(18, 173, 168, 0.25);
}

.card-cta-link svg {
  transition: transform 0.25s ease;
}

.feature-card.hub-card:hover .card-cta-link svg {
  transform: translateX(4px);
}

@media (max-width: 992px) {
  .cards-3.category-hubs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .cards-3.category-hubs-grid {
    grid-template-columns: 1fr;
  }

  .feature-card.hub-card {
    padding: 26px 22px;
  }
}

@media (max-width: 640px) {
  .hero-saas-section {
    padding: 70px 0 60px;
  }

  .hero-title {
    font-size: 32px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .hero-trust-signals {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mockup-subgrid,
  .mockup-bottom-row {
    grid-template-columns: 1fr;
  }

  .social-proof-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Section 7: What We Write About \u2014 Enterprise LegalTech Topic Hub
   ========================================================================== */
.topic-directory-section {
  background: #F8FAFC !important;
  padding: 95px 0;
  border-top: 1px solid #E6E9EF;
  border-bottom: 1px solid #E6E9EF;
}

/* Tabs Navigation Styling */
.saas-tabs-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.saas-tabs-nav .tab-btn {
  padding: 12px 24px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(15, 45, 82, 0.04);
}

.saas-tabs-nav .tab-btn:hover {
  border-color: #12ADA8;
  color: #0C8B87;
  transform: translateY(-2px);
}

.saas-tabs-nav .tab-btn.active {
  background: #0B2545;
  border-color: #0B2545;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(11, 37, 69, 0.2);
}

/* Tab Panel Hidden & Active Display Controls - Guaranteed 0 Empty Gap */
.topic-directory-section .tab-panel {
  display: none !important;
  opacity: 0;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  transition: opacity 0.25s ease;
}

.topic-directory-section .tab-panel.active {
  display: grid !important;
  opacity: 1;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

/* 3-Column Desktop Grid, 2-Column Tablet, 1-Column Mobile */
.saas-pillar-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Individual Content Card Item */
.tab-card-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(15, 45, 82, 0.04);
  position: relative;
  height: 100%;
}

.card-item-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card-item-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 16px;
}

.card-item-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.card-accent-pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 12px;
}

/* Category Accent Styles */
/* 1. eDiscovery Workflows (Teal Accent) */
.tab-card-item.ediscovery .card-item-icon {
  background: rgba(18, 173, 168, 0.08);
  border: 1px solid rgba(18, 173, 168, 0.25);
  color: #0C8B87;
}

.card-accent-pill.ediscovery {
  background: rgba(18, 173, 168, 0.12);
  color: #0C8B87;
}

.tab-card-item.ediscovery:hover {
  transform: translateY(-6px);
  border-color: #12ADA8;
  box-shadow: 0 16px 36px rgba(15, 45, 82, 0.09), 0 0 20px rgba(18, 173, 168, 0.12);
}

.tab-card-item.ediscovery:hover .card-item-icon {
  background: #12ADA8;
  color: #FFFFFF;
  border-color: #12ADA8;
  transform: scale(1.06);
}

/* 2. Legal AI & Automation (Teal + Purple Accent) */
.tab-card-item.ai .card-item-icon {
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: #7C3AED;
}

.card-accent-pill.ai {
  background: #F3E8FF;
  color: #7C3AED;
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.tab-card-item.ai:hover {
  transform: translateY(-6px);
  border-color: #8B5CF6;
  box-shadow: 0 16px 36px rgba(124, 58, 237, 0.12), 0 0 20px rgba(139, 92, 246, 0.12);
}

.tab-card-item.ai:hover .card-item-icon {
  background: #7C3AED;
  color: #FFFFFF;
  border-color: #7C3AED;
  transform: scale(1.06);
}

/* 3. Data Governance & Compliance (Green Accent) */
.tab-card-item.compliance .card-item-icon {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #059669;
}

.card-accent-pill.compliance {
  background: #D1FAE5;
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.tab-card-item.compliance:hover {
  transform: translateY(-6px);
  border-color: #10B981;
  box-shadow: 0 16px 36px rgba(16, 185, 129, 0.12), 0 0 20px rgba(16, 185, 129, 0.12);
}

.tab-card-item.compliance:hover .card-item-icon {
  background: #059669;
  color: #FFFFFF;
  border-color: #059669;
  transform: scale(1.06);
}

/* 4. Investigations & Case Strategy (Amber Accent) */
.tab-card-item.investigations .card-item-icon {
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.25);
  color: #D97706;
}

.card-accent-pill.investigations {
  background: #FEF3C7;
  color: #D97706;
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.tab-card-item.investigations:hover {
  transform: translateY(-6px);
  border-color: #F59E0B;
  box-shadow: 0 16px 36px rgba(217, 119, 6, 0.12), 0 0 20px rgba(245, 158, 11, 0.12);
}

.tab-card-item.investigations:hover .card-item-icon {
  background: #D97706;
  color: #FFFFFF;
  border-color: #D97706;
  transform: scale(1.06);
}

.tab-card-item h4 {
  font-size: 17.5px;
  font-weight: 700;
  color: #0B2545;
  margin-bottom: 8px;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.tab-card-item:hover h4 {
  color: #0C8B87;
}

.tab-card-item p {
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 22px;
  margin-top: 0;
}

.tab-item-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #0C8B87;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: all 0.25s ease;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
  width: 100%;
  margin-top: auto;
}

.tab-card-item:hover .tab-item-link {
  color: #12ADA8;
  border-top-color: rgba(18, 173, 168, 0.25);
}

.tab-item-link svg {
  transition: transform 0.25s ease;
}

.tab-card-item:hover .tab-item-link svg {
  transform: translateX(4px);
}

@media (max-width: 992px) {
  .saas-pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .saas-pillar-grid {
    grid-template-columns: 1fr;
  }

  .tab-card-item {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   Section 8: Written For \u2014 Audience Cards
   ========================================================================== */
.audience-section {
  padding: 80px 0;
  background: #F8FAFC !important;
  border-top: 1px solid #E6E9EF;
  border-bottom: 1px solid #E6E9EF;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.audience-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 45, 82, 0.03);
  height: 100%;
}

.audience-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5px;
  background: linear-gradient(90deg, #0B2545, #12ADA8);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.audience-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}

.audience-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(18, 173, 168, 0.08);
  border: 1px solid rgba(18, 173, 168, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0C8B87;
  transition: all 0.25s ease;
}

.audience-pill {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 10px;
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #CBD5E1;
}

.audience-txt h4 {
  font-size: 16px;
  font-weight: 800;
  color: #0B2545;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
}

.audience-txt p {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.audience-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0C8B87;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
  transition: all 0.25s ease;
}

.audience-footer svg {
  transition: transform 0.25s ease;
}

.audience-card:hover {
  transform: translateY(-6px);
  background: #FFFFFF;
  border-color: #12ADA8;
  box-shadow: 0 16px 36px rgba(15, 45, 82, 0.08), 0 0 16px rgba(18, 173, 168, 0.1);
}

.audience-card:hover::before {
  opacity: 1;
}

.audience-card:hover .audience-icon {
  background: #12ADA8;
  color: #FFFFFF;
  border-color: #12ADA8;
  transform: scale(1.05);
}

.audience-card:hover h4 {
  color: #0C8B87;
}

.audience-card:hover .audience-footer {
  color: #12ADA8;
  border-top-color: rgba(18, 173, 168, 0.25);
}

.audience-card:hover .audience-footer svg {
  transform: translateX(4px);
}

@media (max-width: 992px) {
  .audience-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .audience-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Section 9: Expert Quote \u2014 Reduced Height Testimonial Layout
   ========================================================================== */
.expert-quote-section {
  background: #FFFFFF !important;
  padding: 55px 0;
}

.expert-quote-card {
  background: radial-gradient(circle at 50% 0%, rgba(18, 173, 168, 0.06), #FFFFFF 70%);
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 42px 36px;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 24px rgba(15, 45, 82, 0.04);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.expert-quote-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 45, 82, 0.08);
  border-color: rgba(18, 173, 168, 0.35);
}

.quote-watermark {
  color: rgba(18, 173, 168, 0.25);
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

.expert-quote-text {
  font-family: 'Poppins', sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.65;
  color: #0F172A;
  max-width: 720px;
  margin: 14px auto 28px;
  font-style: italic;
}

.expert-quote-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.author-avatar-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0B2545, #12ADA8);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(11, 37, 69, 0.15);
}

.author-details {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.author-name {
  font-size: 15.5px;
  font-weight: 700;
  color: #0B2545;
}

.author-role {
  font-size: 13px;
  color: #64748B;
  font-weight: 500;
}

.expert-quote-accent-bar {
  height: 3px;
  width: 80px;
  background: linear-gradient(90deg, #0B2545, #12ADA8, #0B2545);
  border-radius: 3px;
  margin: 24px auto 0;
}

@media (max-width: 640px) {
  .expert-quote-card {
    padding: 30px 18px;
  }

  .expert-quote-text {
    font-size: 16.5px;
  }
}

/* ==========================================================================
   Section 11: Enterprise Statistics Counter Banner
   ========================================================================== */
.stats-section {
  padding: 65px 0 50px;
  background: #F8FAFC !important;
}

.saas-stats-banner {
  background: linear-gradient(135deg, #0B2545 0%, #0F172A 60%, #0F3A4A 100%);
  border-radius: 16px;
  padding: 34px 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(15, 45, 82, 0.12);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.saas-stats-banner:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 44px rgba(15, 45, 82, 0.18), 0 0 20px rgba(20, 184, 166, 0.15);
}

.stats-bg-glow {
  position: absolute;
  top: -50%;
  right: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.22) 0%, rgba(20, 184, 166, 0) 70%);
  pointer-events: none;
  border-radius: 50%;
}

.saas-stats-banner .stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  z-index: 1;
}

.saas-stats-banner .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.saas-stats-banner .stat-icon {
  color: #14B8A6;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}

.saas-stats-banner .stat:hover .stat-icon {
  transform: translateY(-2px) scale(1.1);
  color: #2DD4BF;
}

.saas-stats-banner .num {
  font-family: 'Poppins', sans-serif;
  font-size: 38px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.saas-stats-banner .lbl {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
}

.stat-divider {
  width: 1px;
  height: 52px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .saas-stats-banner .stats {
    flex-direction: column;
    gap: 28px;
  }

  .stat-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  }
}

/* ==========================================================================
   Section 12: Newsletter Intro / Closing Banner
   ========================================================================== */
.newsletter-intro-section {
  padding: 50px 0 75px;
  background: #F8FAFC !important;
}

.newsletter-intro-card {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  animation: fadeInUp 0.4s ease forwards;
}

.newsletter-accent-line {
  height: 3.5px;
  width: 48px;
  background: #14B8A6;
  border-radius: 2px;
  margin: 0 auto 18px;
}

.newsletter-intro-card .closing-title {
  font-size: 28px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.35;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.newsletter-intro-card .closing-subtitle {
  font-size: 16px;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 640px) {
  .newsletter-intro-card .closing-title {
    font-size: 22px;
  }

  .newsletter-intro-card .closing-subtitle {
    font-size: 14.5px;
  }
}

/* ==========================================================================
   Blog Category / Archive Page Redesign (Content-First Knowledge Hub)
   ========================================================================== */
.blog-archive-page,
.tools-archive-page,
.single-post-page {
  background: #F8FAFC;
}

.archive-articles-section,
.tools-archive-section {
  padding: 60px 0 80px !important;
  background: linear-gradient(160deg, #f0f4ff 0%, #f8fafc 40%, #eef8f7 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.archive-articles-section::before,
.tools-archive-section::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.archive-articles-section::after,
.tools-archive-section::after {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(10, 78, 107, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.tools-archive-section .tools-grid,
.archive-articles-section .post-grid {
  margin-top: 0 !important;
  margin-bottom: 32px !important;
  position: relative !important;
  z-index: 2 !important;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Veridex-Style Hero Section across all Archive & Category Pages */
.compact-archive-hero {
  position: relative !important;
  padding: 75px 0 65px !important;
  background: linear-gradient(135deg, #0B2545 0%, #06152B 50%, #0A4E6B 100%) !important;
  color: #FFFFFF !important;
  text-align: center !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.compact-archive-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.compact-archive-hero .container {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.compact-archive-hero .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(18, 173, 168, 0.16) !important;
  border: 1px solid rgba(18, 173, 168, 0.4) !important;
  color: #A2E8F6 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  padding: 6px 18px !important;
  border-radius: 50px !important;
  margin: 0 auto 20px !important;
  backdrop-filter: blur(6px) !important;
}

.compact-archive-hero .archive-title {
  font-size: clamp(32px, 4.2vw, 50px) !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  margin: 0 auto 16px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.18 !important;
  text-align: center !important;
  max-width: 960px !important;
}

.compact-archive-hero .archive-description {
  font-size: 17.5px !important;
  color: #CBD5E1 !important;
  line-height: 1.65 !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  font-family: 'Inter', sans-serif !important;
  text-align: center !important;
}

/* Filter Navigation Bar & Scroll Controls Sticky below header or top: 0 in compact mode */
.archive-filter-nav {
  padding: 12px 0 !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0;
  position: sticky !important;
  top: var(--header-height, 66px) !important;
  z-index: 999 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  margin-bottom: 32px !important;
  transition: top 0.2s ease, box-shadow 0.2s ease;
}


.filter-nav-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

.filter-scroll-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-behavior: smooth;
  padding: 8px 16px !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-grow: 1;
  max-width: 100%;
}

.filter-scroll-wrapper .filter-pill:first-child {
  margin-left: auto !important;
}

.filter-scroll-wrapper .filter-pill:last-child {
  margin-right: auto !important;
}

@media (max-width: 768px) {
  .filter-scroll-wrapper {
    justify-content: flex-start !important;
    padding: 8px 32px 8px 16px !important;
  }
  .filter-scroll-wrapper .filter-pill:first-child {
    margin-left: 0 !important;
  }
  .filter-scroll-wrapper .filter-pill:last-child {
    margin-right: 0 !important;
  }
}

.filter-scroll-wrapper::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  flex-shrink: 0;
}

.filter-scroll-wrapper::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar Chrome/Safari */
}

/* Left & Right Scroll Arrow Controls */
.scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  color: #0F172A;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 45, 82, 0.12);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  z-index: 10;
  outline: none;
  line-height: 1;
}

.scroll-arrow:hover {
  background: #12ADA8;
  border-color: #12ADA8;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.35);
  transform: scale(1.08);
}

.scroll-arrow.scroll-left {
  margin-right: 12px !important;
  margin-left: 0 !important;
}

.scroll-arrow.scroll-right {
  margin-left: 18px !important;
  margin-right: 0 !important;
}

.hero-category-chips .filter-pill,
.filter-scroll-wrapper .filter-pill,
.archive-filter-nav .filter-pill,
.filter-pill {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em !important;
  padding: 8px 20px !important;
  border-radius: 50px !important;
  border: 1.5px solid #CBD5E1 !important;
  background: #FFFFFF !important;
  color: #334155 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  outline: none !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 6px rgba(15, 45, 82, 0.04) !important;
}

.hero-category-chips .filter-pill:hover,
.filter-scroll-wrapper .filter-pill:hover,
.archive-filter-nav .filter-pill:hover,
.filter-pill:hover {
  border: 1.5px solid #12ADA8 !important;
  color: #0C8B87 !important;
  background: rgba(18, 173, 168, 0.05) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.18) !important;
}

.hero-category-chips .filter-pill.active,
.filter-scroll-wrapper .filter-pill.active,
.archive-filter-nav .filter-pill.active,
.filter-pill.active,
.filter-pill[aria-current="page"] {
  background: linear-gradient(135deg, #0B2545 0%, #12ADA8 100%) !important;
  border: 1.5px solid #12ADA8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(18, 173, 168, 0.35) !important;
}

/* Archive Articles Grid Section */
.archive-articles-section {
  padding: 40px 0 70px;
}

/* Post Cards Grid */
.archive-articles-section .post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.post-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: opacity 0.25s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease;
  box-shadow: 0 4px 16px rgba(15, 45, 82, 0.04);
  height: 100%;
}

.post-card:hover {
  transform: translateY(-5px);
  border-color: #12ADA8;
  box-shadow: 0 16px 36px rgba(15, 45, 82, 0.08), 0 0 24px rgba(18, 173, 168, 0.14);
}

.post-thumb-link {
  display: block;
  text-decoration: none;
}

.post-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #F1F5F9;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.post-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 12px;
}

.post-meta .cat {
  color: #0C8B87;
  font-weight: 700;
  background: rgba(18, 173, 168, 0.08);
  border: 1px solid rgba(18, 173, 168, 0.22);
  padding: 3px 12px;
  border-radius: 50px;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.post-meta .read-time {
  color: #64748B;
  font-weight: 500;
}

.post-body h3 {
  font-size: 17.5px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-body h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.post-card:hover .post-body h3 a {
  color: #0C8B87;
}

.post-body .summary {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
  margin-top: auto;
}

.freshness-signal {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
}

.freshness-signal svg {
  flex-shrink: 0;
}

.read-article-link {
  font-size: 13.5px;
  font-weight: 700;
  color: #0C8B87;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.25s ease;
}

.read-article-link .arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.post-card:hover .read-article-link {
  color: #12ADA8;
}

.post-card:hover .read-article-link .arrow {
  transform: translateX(4px);
}

/* Empty State Card */
.empty-state-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px dashed #CBD5E1;
  padding: 48px 24px;
  text-align: center;
  margin: 30px auto;
  max-width: 540px;
  box-shadow: 0 4px 16px rgba(15, 45, 82, 0.03);
}

.empty-state-icon {
  margin-bottom: 14px;
}

.empty-state-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
}

.empty-state-card p {
  font-size: 14.5px;
  color: #64748B;
  margin-bottom: 20px;
  line-height: 1.5;
}

.empty-state-card .reset-filter-btn {
  margin: 0 auto;
}

@media (max-width: 992px) {
  .archive-articles-section .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .archive-articles-section .post-grid {
    grid-template-columns: 1fr;
  }

  .compact-archive-hero .archive-title {
    font-size: 24px;
  }
}

/* Post Cards Layout */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.post-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(15, 45, 82, 0.04);
  text-decoration: none;
  height: 100%;
}

.post-card:hover {
  transform: translateY(-6px);
  border-color: #12ADA8;
  box-shadow: 0 16px 36px rgba(15, 45, 82, 0.09), 0 0 20px rgba(18, 173, 168, 0.12);
}

.post-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #F1F5F9;
}

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

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

.post-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 12px;
}

.post-meta .cat {
  color: #0C8B87;
  font-weight: 700;
  background: rgba(18, 173, 168, 0.08);
  padding: 2px 8px;
  border-radius: 10px;
}

.post-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0B2545;
  margin-bottom: 10px;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.post-card:hover .post-body h3 {
  color: #0C8B87;
}

.post-body .summary {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 20px;
}

.post-body .rm {
  font-size: 13px;
  font-weight: 700;
  color: #0C8B87;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.25s ease;
}

.post-card:hover .post-body .rm {
  color: #12ADA8;
  border-top-color: rgba(18, 173, 168, 0.25);
}

@media (max-width: 992px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
}

/* ====================================================
   DISCOVERYTECHLAB TOOL CARDS DIRECTORY (MATCHING SCREENSHOT)
   ==================================================== */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.tool-card {
  background: #FFFFFF;
  border-radius: 24px;
  border: 1px solid #E5EEF5;
  padding: 26px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), border-color 250ms ease, box-shadow 250ms ease;
  position: relative;
}

.tool-card:hover {
  transform: translateY(-4px);
  border-color: #14B8A6;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09), 0 0 20px rgba(20, 184, 166, 0.12);
}

.tool-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tool-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #E6F7F5;
  color: #0C8B87;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tool-cat-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: #0284C7;
  background: #E0F2FE;
  padding: 5px 14px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tool-card[data-cat="collection"] .tool-cat-badge,
.tool-card[data-cat="ediscovery"] .tool-cat-badge {
  background: #E0F2FE;
  color: #0284C7;
}

.tool-card[data-cat="privacy"] .tool-cat-badge,
.tool-card[data-cat="compliance"] .tool-cat-badge {
  background: #F3E8FF;
  color: #9333EA;
}

.tool-card[data-cat="forensics"] .tool-cat-badge,
.tool-card[data-cat="investigation"] .tool-cat-badge {
  background: #DCFCE7;
  color: #16A34A;
}

.tool-card h3 {
  font-size: 19px;
  font-weight: 800;
  color: #0D2B52;
  margin-bottom: 10px;
  line-height: 1.35;
  transition: color 250ms ease;
}

.tool-card:hover h3 {
  color: #14B8A6;
}

.tool-card p {
  font-size: 14px;
  color: #64748B;
  line-height: 1.55;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 44px;
}

.tool-features-bar {
  background: #F8FAFC;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.tool-features-bar span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tool-features-bar span svg {
  color: #0D9488;
  flex-shrink: 0;
}

.tool-card-footer {
  margin-top: auto;
}

.tool-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  background: #0D2B52;
  color: #FFFFFF !important;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 12px;
  text-decoration: none !important;
  gap: 8px;
  transition: background 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}

.tool-link .arrow {
  display: inline-block;
  font-size: 15px;
  transition: transform 250ms ease;
}

.tool-card:hover .tool-link {
  background: #14B8A6;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 184, 166, 0.28);
}

.tool-card:hover .tool-link .arrow {
  transform: translateX(4px);
}

@media (max-width: 1380px) {
  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .tools-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tool-card {
    padding: 20px;
    border-radius: 20px;
  }
}

/* ====================================================
   PREMIUM SAAS CONTACT PAGE REDESIGN (Elementor & WPForms Ready)
   ==================================================== */
.contact-layout {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 32px;
  align-items: stretch;
  padding-bottom: 32px;
}

/* LEFT CARD (Direct Inquiries Information Card) */
.contact-info-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.contact-info-card:hover {
  transform: translateY(-3px);
  border-color: #12ADA8;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08), 0 0 20px rgba(18, 173, 168, 0.1);
}

.contact-info-card-content {
  display: flex;
  flex-direction: column;
}

.contact-info-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 10px;
  line-height: 1.3;
}

.contact-trust-footer {
  margin-top: 28px;
  padding: 14px 16px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #0C8B87;
  transition: background 200ms ease, border-color 200ms ease;
}

.contact-trust-footer:hover {
  background: #FFFFFF;
  border-color: rgba(18, 173, 168, 0.3);
}

.contact-trust-footer svg {
  flex-shrink: 0;
}

.contact-info-card p {
  font-size: 14.5px;
  color: #64748B;
  line-height: 1.6;
  margin-bottom: 28px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: #F8FAFC;
  border-radius: 14px;
  border: 1px solid #F1F5F9;
  margin-bottom: 16px;
  transition: background 200ms ease, border-color 200ms ease;
}

.contact-item:last-child {
  margin-bottom: 0;
}

.contact-item:hover {
  background: #FFFFFF;
  border-color: rgba(18, 173, 168, 0.3);
}

.contact-help-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0 0;
}

.contact-help-list li {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  position: relative;
  padding-left: 14px;
  margin-bottom: 3px;
}

.contact-help-list li:last-child {
  margin-bottom: 0;
}

.contact-help-list li::before {
  content: "\u2022";
  color: #0C8B87;
  font-weight: 800;
  position: absolute;
  left: 0;
  top: 0;
}

.contact-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(18, 173, 168, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-item-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-item-text strong {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
}

.contact-item-text span {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.5;
}

.contact-email-link {
  color: #0C8B87;
  font-weight: 600;
  text-decoration: none;
  transition: color 200ms ease;
}

.contact-email-link:hover {
  color: #12ADA8;
}

/* RIGHT CARD (Contact Form Container) */
.form-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 40px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  transition: box-shadow 250ms ease, border-color 250ms ease;
}

.form-box:hover {
  border-color: #CBD5E1;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.07);
}

.form-box h3 {
  font-size: 24px;
  font-weight: 800;
  color: #0F172A;
  margin-top: 0;
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font-size: 14.5px;
  font-family: inherit;
  color: #0F172A;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  box-sizing: border-box;
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-group textarea {
  width: 100%;
  min-height: 140px;
  padding: 14px 16px;
  font-size: 14.5px;
  font-family: inherit;
  color: #0F172A;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  box-sizing: border-box;
  resize: vertical;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: #12ADA8;
  box-shadow: 0 2px 10px rgba(18, 173, 168, 0.12);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #12ADA8;
  box-shadow: 0 0 0 3px rgba(18, 173, 168, 0.2);
  outline: none;
}

/* Custom Select Dropdown - Theme Mouse Hover Support */
.custom-select-container {
  position: relative;
  width: 100%;
}

.custom-select-trigger {
  width: 100%;
  height: 52px;
  padding: 0 40px 0 16px;
  font-size: 14.5px;
  font-family: inherit;
  color: #0F172A;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  user-select: none;
}

.custom-select-trigger:hover {
  border-color: #12ADA8;
  box-shadow: 0 2px 10px rgba(18, 173, 168, 0.12);
}

.custom-select-container.open .custom-select-trigger {
  border-color: #12ADA8;
  box-shadow: 0 0 0 3px rgba(18, 173, 168, 0.2);
}

.custom-select-trigger::after {
  content: '';
  width: 10px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 200ms ease;
}

.custom-select-container.open .custom-select-trigger::after {
  transform: rotate(180deg);
}

.custom-options-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.15);
  z-index: 999;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

.custom-select-container.open .custom-options-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.custom-option-item {
  padding: 13px 18px;
  font-size: 14.5px;
  color: #0F172A;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

/* THEME HOVER EFFECT ON MOUSE OVER */
.custom-option-item:hover {
  background-color: #12ADA8 !important;
  color: #FFFFFF !important;
}

.custom-option-item.selected {
  font-weight: 600;
  color: #0B2545;
  background-color: #F8FAFC;
}

.custom-option-item.selected:hover {
  background-color: #12ADA8 !important;
  color: #FFFFFF !important;
}

/* Submit Button */
.form-box button[type="submit"] {
  width: 100%;
  height: 52px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #12ADA8 0%, #0C8B87 100%);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(18, 173, 168, 0.25);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.form-box button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(18, 173, 168, 0.35);
  background: linear-gradient(135deg, #15c5bf 0%, #0e9e99 100%);
}

.form-box button[type="submit"]:active {
  transform: translateY(0);
}

/* Privacy Reassurance */
.privacy-reassurance {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #64748B;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #F1F5F9;
}

.privacy-reassurance svg {
  color: #0C8B87;
  flex-shrink: 0;
}

@media (max-width: 992px) {
  .contact-layout {
    grid-template-columns: 45% 55%;
    gap: 24px;
  }
}

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

  .form-box {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .contact-info-card {
    padding: 24px 20px;
    border-radius: 16px;
  }
}

/* ====================================================
   PREMIUM SAAS ABOUT US & LEGAL PAGES (Compact Spacing Matching Blog.html)
   ==================================================== */
.about-hero-section {
  padding: 36px 0 24px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border-bottom: 1px solid #E2E8F0;
  position: relative;
  overflow: hidden;
}

.about-hero-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.about-hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.about-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: #0C8B87;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(18, 173, 168, 0.08);
  padding: 6px 14px;
  border-radius: 20px;
  margin: 0 auto 12px;
  border: 1px solid rgba(18, 173, 168, 0.15);
  text-align: center;
}

.about-hero-title {
  font-size: 38px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
  max-width: 860px;
  margin: 0 auto 12px;
  text-align: center;
}

.about-hero-desc {
  font-size: 16px;
  color: #64748B;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.about-main-container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 28px;
  padding-bottom: 32px;
}

/* 1. Mission Card */
.about-mission-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 36px 40px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.about-mission-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #12ADA8 0%, #0C8B87 100%);
}

.about-mission-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.07);
}

.about-mission-card h2 {
  font-size: 26px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 18px;
  text-align: center;
}

.about-mission-card p {
  font-size: 15.5px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 16px;
  text-align: justify;
}

.about-mission-card p:last-child {
  margin-bottom: 0;
}

/* 2. EDRM Expertise Section */
.about-edrm-section {
  margin-bottom: 32px;
}

.about-edrm-section h2 {
  font-size: 26px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 24px;
  text-align: center;
}

.edrm-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.edrm-feature-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.edrm-feature-card:hover {
  transform: translateY(-4px);
  border-color: #12ADA8;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08), 0 0 20px rgba(18, 173, 168, 0.1);
}

.edrm-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(18, 173, 168, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.edrm-feature-card h4 {
  font-size: 19px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
  text-align: center;
}

.edrm-feature-card p {
  font-size: 14.5px;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
  text-align: justify;
}

/* 3. About DiscoveryTechLab Split Layout */
.about-brand-section {
  margin-bottom: 32px;
}

.about-brand-section h2 {
  font-size: 26px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 24px;
  text-align: center;
}

.about-brand-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 36px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.dtl-brand-showcase-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 24px;
  background: linear-gradient(145deg, #0B2545 0%, #123163 100%);
  border-radius: 16px;
  border: 1px solid rgba(31, 181, 179, 0.35);
  box-shadow: 0 10px 30px rgba(11, 37, 69, 0.2);
  min-width: 230px;
}

.dtl-brand-showcase-card .brand-logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.dtl-brand-showcase-card .logo-mark-large {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(31, 181, 179, 0.25) 0%, rgba(12, 139, 135, 0.4) 100%);
  border: 1.5px solid rgba(162, 232, 246, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.dtl-brand-showcase-card .brand-title-text {
  font-family: 'Poppins', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.dtl-brand-showcase-card .brand-title-text .brand-hl {
  color: #4FD1C5;
}

.dtl-brand-showcase-card .brand-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(31, 181, 179, 0.15);
  border: 1px solid rgba(31, 181, 179, 0.4);
  color: #A2E8F6;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-num {
  font-size: 16px;
  font-weight: 800;
  color: #0C8B87;
}

.badge-title {
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
}

.brand-bio-text p {
  font-size: 15.5px;
  color: #475569;
  line-height: 1.7;
  margin: 0;
  text-align: justify;
}

/* 4. Professional Highlights */
.about-highlights-section {
  margin-top: 35px;
  margin-bottom: 35px;
}

.highlights-container {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 40px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.highlights-container h3 {
  font-size: 24px;
  font-weight: 800;
  color: #0F172A;
  margin-top: 0;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid #F1F5F9;
  text-align: center;
}

.highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: #F8FAFC;
  border-radius: 14px;
  border: 1px solid #F1F5F9;
  font-size: 14.5px;
  color: #334155;
  line-height: 1.6;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  text-align: justify;
}

.highlights-list li:hover {
  background: #FFFFFF;
  border-color: rgba(18, 173, 168, 0.3);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.check-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(18, 173, 168, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* 5. Objective Section */
.about-objective-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 4px solid #12ADA8;
  border-radius: 18px;
  padding: 36px 40px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.about-objective-card h2 {
  font-size: 24px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 14px;
  text-align: center;
}

.about-objective-card p {
  font-size: 15.5px;
  color: #475569;
  line-height: 1.7;
  margin: 0;
  text-align: justify;
}

@media (max-width: 992px) {
  .edrm-cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-brand-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .brand-avatar-card {
    border-right: none;
    border-bottom: 1px solid #F1F5F9;
    padding-right: 0;
    padding-bottom: 20px;
  }
}

@media (max-width: 640px) {
  .about-hero-title {
    font-size: 28px;
  }

  .about-mission-card,
  .legal-card,
  .highlights-container,
  .about-objective-card,
  .about-brand-split {
    padding: 24px 20px;
    border-radius: 16px;
  }
}

/* Legal Pages Styling matching About Us */
.legal-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: #0F172A;
  margin-top: 24px;
  margin-bottom: 12px;
  text-align: center;
}

.legal-card h2 {
  margin-top: 32px;
  text-align: center;
}

.legal-card h2:first-child {
  margin-top: 0;
}

/* Footer Responsive Media Queries */
@media (max-width: 1024px) {
  footer.site-footer .container {
    padding: 0 24px;
  }

  .footer-newsletter {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 20px;
  }

  .newsletter-content,
  .newsletter-action {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }

  .footer-brand-col .footer-desc,
  .footer-founder-info {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  footer.site-footer {
    padding: 40px 0 0;
  }

  .footer-newsletter {
    padding: 24px 20px;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form input[type="email"],
  .btn-subscribe {
    width: 100%;
    justify-content: center;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-seo {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 14px;
    justify-content: center;
  }
}

/* Responsive eDiscovery Lifecycle Timeline - Tablet Rows & Mobile Swipe Carousel */
@media (max-width: 1024px) and (min-width: 641px) {

  /* Tablet: Cards wrap into logical rows */
  .lifecycle-stages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  .timeline-track-line {
    display: none;
  }
}

@media (max-width: 840px) and (min-width: 641px) {
  .lifecycle-stages-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 640px) {

  /* Mobile: Converts into a horizontal swipe timeline */
  .ediscovery-lifecycle-section {
    padding: 44px 0 36px;
  }

  .lifecycle-timeline-wrapper {
    position: relative;
  }

  .lifecycle-stages-grid {
    display: flex;
    overflow-x: auto;
    /* scroll-snap-type: disabled for smooth js scrolling */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
    gap: 14px;
    scrollbar-width: thin;
    scrollbar-color: #12ADA8 rgba(255, 255, 255, 0.08);
  }

  .lifecycle-stages-grid::-webkit-scrollbar {
    height: 5px;
  }

  .lifecycle-stages-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
  }

  .lifecycle-stages-grid::-webkit-scrollbar-thumb {
    background: #12ADA8;
    border-radius: 4px;
  }

  .lifecycle-stage-card {
    flex: 0 0 225px;
    min-width: 225px;

    padding: 14px 12px;
  }

  .timeline-track-line {
    display: none;
  }

  .ediscovery-lifecycle-section .title-gradient {
    font-size: 25px;
  }

  .lifecycle-geo-note {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================================
   Coming Soon Modal Overlay & Card Styling
   ========================================================================== */
.coming-soon-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(7, 27, 56, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 999999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.coming-soon-modal-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.coming-soon-modal-card {
  background: linear-gradient(145deg, #0B2545 0%, #061A33 100%);
  border: 1px solid rgba(37, 211, 196, 0.35);
  border-radius: 20px;
  max-width: 540px;
  width: 100%;
  padding: 36px 32px;
  color: #FFFFFF;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(18, 173, 168, 0.2);
  transform: translateY(0);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

.coming-soon-modal-overlay.active .coming-soon-modal-card {
  transform: translateY(0) scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 18px;
  right: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
}

.modal-close-btn:hover {
  background: #12ADA8;
  border-color: #12ADA8;
  color: #FFFFFF;
  transform: rotate(90deg);
}

.modal-badge-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(18, 173, 168, 0.15);
  color: #48E5E0;
  border: 1px solid rgba(18, 173, 168, 0.35);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}

.modal-tool-title {
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 18px;
  line-height: 1.3;
}

.modal-tool-title span {
  color: #48E5E0;
}

.modal-section-box {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3.5px solid #12ADA8;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.modal-section-label {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  margin-bottom: 4px;
}

.modal-tool-desc {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.modal-status-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 14px;
}

.modal-sub-text {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 28px;
}

.modal-action-row {
  display: flex;
  justify-content: flex-end;
}

.btn-modal-back {
  padding: 12px 28px;
  border-radius: 30px;
  background: linear-gradient(135deg, #12ADA8 0%, #0C8B87 100%);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(18, 173, 168, 0.35);
}

.btn-modal-back:hover {
  background: linear-gradient(135deg, #48E5E0 0%, #12ADA8 100%);
  color: #071931;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(18, 173, 168, 0.5);
}

/* ==========================================================================
   Single Tool Dedicated Coming Soon Page Styling (Premium SaaS Design)
   ========================================================================== */
.single-tool-body {
  background: #061A33;
  color: #FFFFFF;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.single-tool-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px 72px;
  position: relative;
  background: #061A33;
  background-image:
    radial-gradient(circle at 50% 15%, rgba(18, 173, 168, 0.045) 0%, transparent 60%),
    radial-gradient(circle at 85% 85%, rgba(72, 229, 224, 0.02) 0%, transparent 50%);
  overflow: hidden;
}

.single-tool-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.035;
  pointer-events: none;
}

/* Main Card Container with Micro-Animation */
.tool-coming-soon-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(145deg, #0A1F3B 0%, #06172E 100%);
  border: 1px solid rgba(18, 173, 168, 0.22);
  border-radius: 16px;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 36px 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(18, 173, 168, 0.08);
  text-align: left;
  animation: toolCardFadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toolCardFadeUp {
  0% {
    opacity: 0.9;
    transform: translateY(0);
  }

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

/* Status Header Bar */
.tool-card-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.tool-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(18, 173, 168, 0.1);
  color: #48E5E0;
  border: 1px solid rgba(18, 173, 168, 0.3);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  letter-spacing: 0.02em;
}

/* Tool Title Header */
.tool-title-header {
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 18px;
}

.tool-category-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #12ADA8;
  background: rgba(18, 173, 168, 0.1);
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(18, 173, 168, 0.25);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.tool-heading {
  font-size: 28px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}

.tool-name-gradient {
  background: linear-gradient(135deg, #FFFFFF 40%, #48E5E0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tool-subtitle {
  font-size: 13.5px;
  color: #94A3B8;
  margin: 0 0 14px;
  font-weight: 500;
}

/* Optional Micro Badges Tags */
.tool-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tool-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  color: #94A3B8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 10px;
  border-radius: 6px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.tool-tag.status-tag {
  color: #48E5E0;
  background: rgba(18, 173, 168, 0.08);
  border-color: rgba(18, 173, 168, 0.25);
}

/* Modernized Description Card */
.tool-desc-box {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(18, 173, 168, 0.2);
  border-left: 3px solid #12ADA8;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.desc-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.tool-desc-label {
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: #48E5E0;
  font-weight: 700;
}

.tool-desc-box p {
  font-size: 14px;
  color: #E2E8F0;
  line-height: 1.55;
  margin: 0;
}

/* Notice Body Text */
.tool-notice-body {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tool-notice-text {
  font-size: 14px;
  color: #CBD5E1;
  line-height: 1.6;
  margin: 0;
}

/* Action Area & Button */
.tool-action-area {
  display: flex;
  justify-content: flex-end;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-back-tools {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 50px;
  background: linear-gradient(135deg, #12ADA8 0%, #0C8B87 100%);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.3);
  outline: none;
}

.btn-back-tools:hover,
.btn-back-tools:focus-visible {
  background: linear-gradient(135deg, #48E5E0 0%, #12ADA8 100%);
  color: #071931;
  transform: translateX(-3px);
  box-shadow: 0 6px 20px rgba(18, 173, 168, 0.45);
  outline: 2px solid #48E5E0;
  outline-offset: 2px;
}

.btn-back-tools svg {
  transition: transform 0.25s ease;
}

.btn-back-tools:hover svg {
  transform: translateX(-3px);
}

/* Tool Notice Footer & Buttons (Coming Soon Page Dark Card High Contrast) */
.tool-notice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tool-notice-footer .btn,
.tool-coming-soon-card .tool-notice-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
  line-height: 1.3;
}

/* Secondary Button: Back to Tools Directory */
.tool-notice-footer .btn-secondary,
.tool-coming-soon-card .btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #E2E8F0 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
}

.tool-notice-footer .btn-secondary:hover,
.tool-coming-soon-card .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-1px);
}

/* Primary Button: Request Early Beta Access */
.tool-notice-footer .btn-primary,
.tool-coming-soon-card .btn-primary {
  background: linear-gradient(135deg, #12ADA8 0%, #0C8B87 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #12ADA8 !important;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.35) !important;
}

.tool-notice-footer .btn-primary:hover,
.tool-coming-soon-card .btn-primary:hover {
  background: linear-gradient(135deg, #48E5E0 0%, #12ADA8 100%) !important;
  color: #071931 !important;
  border-color: #48E5E0 !important;
  box-shadow: 0 6px 20px rgba(18, 173, 168, 0.5) !important;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .single-tool-wrapper {
    padding: 36px 16px 48px;
  }

  .tool-coming-soon-card {
    padding: 24px 20px 20px;
    border-radius: 14px;
  }

  .tool-heading {
    font-size: 22px;
  }

  .tool-action-area {
    justify-content: center;
  }

  .btn-back-tools {
    width: 100%;
  }
}

/* About Page CTA Buttons Hover Effects */
.btn-about-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.btn-about-cta.teal {
  background: var(--teal);
  color: var(--white);
  border: 2px solid var(--teal);
}

.btn-about-cta.teal:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(18, 173, 168, 0.4);
}

.btn-about-cta.navy {
  background: var(--navy);
  color: var(--white);
  border: 2px solid var(--navy);
}

.btn-about-cta.navy:hover {
  background: var(--navy-2);
  border-color: var(--navy-2);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11, 37, 69, 0.35);
}

.btn-about-cta .arrow {
  transition: transform 0.25s ease;
  display: inline-block;
}

.btn-about-cta:hover .arrow {
  transform: translateX(5px);
}













/* ==========================================================================
   ORIGINAL CLEAN MEGAMENU ENGINE
   ========================================================================== */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(11, 37, 69, 0.05);
}

.site-header .header-inner {
  position: relative !important;
}

nav.main-nav ul li.has-megamenu {
  position: static !important;
}

.megamenu-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 24px;
  right: 24px;
  width: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 20px 45px rgba(11, 37, 69, 0.18);
  padding: 20px 28px 28px;
  z-index: 1200;
  max-height: 75vh;
  overflow-y: auto;
}

.megamenu-panel::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  height: 30px;
  background: transparent;
}

nav.main-nav ul li.has-megamenu:hover .megamenu-panel,
nav.main-nav ul li.has-megamenu.is-hovered .megamenu-panel,
nav.main-nav ul li.has-megamenu.open .megamenu-panel {
  display: block;
}












/* ==========================================================================
   HEADER ACTIVE TAB PILLS & COMPACT MEGAMENU SUB-LINKS FIX
   ========================================================================== */
nav.main-nav>ul {
  gap: 6px !important;
}

nav.main-nav>ul>li {
  white-space: nowrap !important;
}

/* Top-Level Header Navigation Links Base */
nav.main-nav>ul>li>a {
  padding: 6px 12px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

/* Active Pill Style ONLY for Top-Level Header Navigation Links (Includes Tools Parent Header Item) */
.site-header nav.main-nav>ul>li>a.active,
.site-header nav.main-nav>ul>li.has-megamenu>a.active,
.site-header nav.main-nav>ul>li.has-megamenu>a.megamenu-trigger.active,
.site-header nav.main-nav>ul>li.has-dropdown>a.active,
.site-header nav.main-nav>ul>li.has-dropdown>a.dropdown-trigger.active {
  color: #0d807c !important;
  background: rgba(18, 173, 168, 0.12) !important;
  border-bottom: 2.5px solid #12ADA8 !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* Megamenu Sub-menu Links (Clean, Compact Text Links - NO Pill Styling) */
.megamenu-panel .megamenu-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.megamenu-panel .megamenu-links li {
  margin: 0 !important;
  padding: 1.5px 0 !important;
  /* Compact vertical spacing */
  white-space: normal !important;
}

.megamenu-panel .megamenu-links a,
.megamenu-panel .megamenu-links a.active {
  color: var(--navy) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 3px 6px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  display: inline-block !important;
  border-radius: 4px !important;
}

.megamenu-panel .megamenu-links a:hover {
  color: var(--teal-dark) !important;
  background: rgba(18, 173, 168, 0.08) !important;
  border: none !important;
}



/* ==========================================================================
   PERFECT FULL-WIDTH MEGAMENU, HOVER PILL SHAPE & TEAL BOTTOM LINE ENGINE
   ========================================================================== */

header.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(11, 37, 69, 0.05) !important;
}

.site-header .header-inner {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 24px !important;
  max-width: var(--maxw) !important;
  margin: 0 auto !important;
}

.site-header nav.main-nav {
  position: static !important;
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
}

.site-header nav.main-nav>ul,
.site-header nav.main-nav>ul>li.has-megamenu {
  position: static !important;
}

.site-header nav.main-nav>ul>li.has-dropdown {
  position: relative !important;
}

nav.main-nav>ul {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

nav.main-nav>ul>li {
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Base Navigation Link with Reserved Bottom Line (Prevents Any Vertical Jump) */
nav.main-nav>ul>li>a {
  padding: 6px 10px !important;
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  background: transparent !important;
  border-radius: 6px !important;
  border-bottom: 3px solid transparent !important;
  /* Thin bottom line reserved space */
  white-space: nowrap !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1.2 !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

/* Hover State: Soft Teal Pill Background Shape + Thin Teal Line at Bottom */
nav.main-nav>ul>li>a:hover,
nav.main-nav>ul>li.has-dropdown:hover>a,
nav.main-nav>ul>li.has-dropdown.is-hovered>a,
nav.main-nav>ul>li.has-dropdown.open>a,
nav.main-nav>ul>li.has-megamenu:hover>a,
nav.main-nav>ul>li.has-megamenu.is-hovered>a,
nav.main-nav>ul>li.has-megamenu.open>a {
  color: #0c8b87 !important;
  background: rgba(18, 173, 168, 0.07) !important;
  border-bottom: 2px solid rgba(18, 173, 168, 0.4) !important;
  border-radius: 6px !important;
}

/* Active Page State: Soft Teal Pill Background Shape + Solid Thin Teal Bottom Line */
.site-header nav.main-nav>ul>li>a.active,
.site-header nav.main-nav>ul>li.has-megamenu>a.active,
.site-header nav.main-nav>ul>li.has-megamenu>a.megamenu-trigger.active,
.site-header nav.main-nav>ul>li.has-dropdown>a.active,
.site-header nav.main-nav>ul>li.has-dropdown>a.dropdown-trigger.active {
  color: #0c8b87 !important;
  background: rgba(18, 173, 168, 0.15) !important;
  border-bottom: 5px solid #12ADA8 !important;
  /* Thin teal bottom indicator line */
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* Search Box Fixed Dimensions */
.header-search .search-box {
  max-width: 200px !important;
  width: 200px !important;
  background: var(--bg-light) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 4px 6px 4px 14px !important;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
}

.header-search .search-box:focus-within {
  border-color: var(--teal) !important;
  background: var(--white) !important;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.2) !important;
  max-width: 200px !important;
  width: 200px !important;
}

/* FULL-WIDTH MEGAMENU PANEL */
.megamenu-panel {
  display: none;
  position: absolute !important;
  top: 100% !important;
  left: 24px !important;
  right: 24px !important;
  width: calc(100% - 48px) !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-bottom: 5px solid #12ADA8 !important;
  border-bottom: 5px solid #12ADA8 !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  box-shadow: 0 16px 36px rgba(11, 37, 69, 0.14) !important;
  padding: 24px 28px 28px !important;
  z-index: 1200 !important;
  max-height: 75vh !important;
  overflow-y: auto !important;
}

/* Seamless Overlapping Hover Bridge to prevent dropdown closure during mouse movement */
.megamenu-panel::before {
  content: "";
  position: absolute;
  top: -30px !important;
  /* Extends 30px UPWARDS to cover the header padding gap completely */
  left: 0 !important;
  right: 0 !important;
  height: 35px !important;
  background: transparent !important;
  pointer-events: auto !important;
  z-index: 1201 !important;
}

/* Maintain Megamenu open state seamlessly */
nav.main-nav ul li.has-megamenu:hover>.megamenu-panel,
nav.main-nav ul li.has-megamenu.is-hovered>.megamenu-panel,
nav.main-nav ul li.has-megamenu.open>.megamenu-panel {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 4-Column Megamenu Grid Layout */
.megamenu-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.megamenu-cat {
  background: var(--bg-light) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--border) !important;
  transition: all var(--transition) !important;
}

.megamenu-cat:hover {
  border-color: var(--teal) !important;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.12) !important;
  background: #FFFFFF !important;
}

/* Megamenu Sub-menu Links */
.megamenu-panel .megamenu-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.megamenu-panel .megamenu-links li {
  margin: 0 !important;
  padding: 1.5px 0 !important;
  white-space: normal !important;
}

.megamenu-panel .megamenu-links a,
.megamenu-panel .megamenu-links a.active {
  color: var(--navy) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 3px 6px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  display: inline-block !important;
  border-radius: 4px !important;
}

.megamenu-panel .megamenu-links a:hover {
  color: var(--teal-dark) !important;
  background: rgba(18, 173, 168, 0.08) !important;
  border: none !important;
}

/* Strict No-Shrink / No-Scale for All Header & Megamenu Elements */
.site-header nav.main-nav a,
.site-header nav.main-nav a:hover,
.site-header nav.main-nav a:focus,
.site-header nav.main-nav a:active,
.site-header nav.main-nav a:visited,
.megamenu-panel a,
.megamenu-panel a:hover,
.megamenu-panel a:focus,
.megamenu-panel a:active {
  transform: none !important;
  scale: 1 !important;
  zoom: 1 !important;
  animation: none !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}


/* ==========================================================================
   UNIVERSAL EYEBROW PILL BADGE STYLING (MATCHES ABOUT US HERO DESIGN)
   ========================================================================== */
.eyebrow,
.archive-eyebrow,
.tool-category-label,
.section-head .eyebrow,
.hero-content .eyebrow,
.compact-archive-hero .eyebrow,
.post-header .eyebrow,
.article-header .eyebrow,
.single-tool-wrapper .tool-category-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0c8b87 !important;
  background: rgba(18, 173, 168, 0.12) !important;
  border: 1px solid rgba(18, 173, 168, 0.3) !important;
  padding: 5px 16px !important;
  border-radius: 20px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 2px 8px rgba(18, 173, 168, 0.08) !important;
  transition: all 0.2s ease !important;
}

.eyebrow:hover,
.archive-eyebrow:hover,
.tool-category-label:hover {
  background: rgba(18, 173, 168, 0.18) !important;
  border-color: rgba(18, 173, 168, 0.45) !important;
  color: #096a67 !important;
}


/* ==========================================================================
   CATEGORY FILTER HORIZONTAL SCROLL & ARROW ENGINE
   ========================================================================== */
.filter-nav-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 100% !important;
}

.filter-scroll-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow-x: scroll !important;
  scroll-behavior: smooth !important;
  padding: 8px 16px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex-grow: 1 !important;
  max-width: 100% !important;
  cursor: grab !important;
  user-select: none !important;
}

.filter-scroll-wrapper::-webkit-scrollbar {
  display: none !important;
}

.scroll-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(15, 45, 82, 0.12) !important;
  transition: all 0.25s ease !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
  outline: none !important;
  line-height: 1 !important;
}

.scroll-arrow:hover {
  background: #12ADA8 !important;
  border-color: #12ADA8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(18, 173, 168, 0.35) !important;
}


/* ==========================================================================
   FLEXBOX SCROLL FIX FOR CATEGORY FILTER BAR
   ========================================================================== */
.filter-nav-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.filter-scroll-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  padding: 8px 16px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex: 1 1 0% !important;
  /* CRITICAL: Allows wrapper to constrain width and scroll horizontally */
  min-width: 0 !important;
  /* CRITICAL: Prevents flex child from expanding to content width */
  max-width: 100% !important;
  cursor: grab !important;
  user-select: none !important;
}

.filter-scroll-wrapper::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.scroll-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(15, 45, 82, 0.12) !important;
  transition: all 0.25s ease !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
  outline: none !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 4px !important;
}

.scroll-arrow:hover {
  background: #12ADA8 !important;
  border-color: #12ADA8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(18, 173, 168, 0.35) !important;
}

/* Featured Tool Card Style (as in screenshot) */
.veridex-featured-card {
  position: relative;
  background: #FFFFFF;
  border: 1.5px solid rgba(18, 173, 168, 0.25);
  border-radius: 20px;
  padding: 28px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(18, 173, 168, 0.07), 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.veridex-featured-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(18, 173, 168, 0.18), 0 0 0 1.5px rgba(18,173,168,0.5);
  border-color: #12ADA8;
}

/* Diagonal Ribbon on top right */
.veridex-featured-card .ribbon-badge {
  position: absolute;
  top: 18px;
  right: -32px;
  background: #0B2545;
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 34px;
  transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(11, 37, 69, 0.2);
  z-index: 2;
  pointer-events: none;
}

.veridex-featured-card .ribbon-badge span {
  color: #F59E0B;
}

/* Top Header Info Row */
.veridex-featured-card .card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.veridex-featured-card .icon-box {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, rgba(18, 173, 168, 0.12) 0%, rgba(18, 173, 168, 0.06) 100%);
  border-radius: 10px;
  border: 1px solid rgba(18, 173, 168, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #12ADA8;
}

.veridex-featured-card .module-pill {
  font-size: 11px;
  font-weight: 700;
  color: #0C8B87;
  background: rgba(18, 173, 168, 0.12);
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 28px;
}

/* Content Area */
.veridex-featured-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.veridex-featured-card p {
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

/* Checkmarks Row */
.veridex-featured-card .features-check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F8FFFE;
  border: 1px solid rgba(18,173,168,0.12);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 20px;
}

.veridex-featured-card .features-check-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.veridex-featured-card .features-check-row span svg {
  stroke: #12ADA8;
}

/* Action Launch Button */
.veridex-featured-card .launch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #0B2545;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.veridex-featured-card:hover .launch-btn {
  background: #12ADA8;
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(18, 173, 168, 0.35);
}

.veridex-featured-card .launch-btn .btn-arrow {
  transition: transform 0.25s ease;
}

.veridex-featured-card:hover .launch-btn .btn-arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   VERIDEX Product Suite \u2014 Modern Enterprise SaaS Design System
   ========================================================================== */

/* Hero Section - Clean Enterprise SaaS Layout */
.v-product-hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  padding: 52px 0 44px 0;
  color: #FFFFFF;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 993px) {
  .v-product-hero {
    padding: 52px 0 44px 0;
  }
}

.v-product-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.15) 0%, rgba(15, 23, 42, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.v-product-hero .container {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 24px;
}

.v-hero-badge {
  background: rgba(18, 173, 168, 0.15);
  color: #A2E8F6;
  border: 1px solid rgba(162, 232, 246, 0.3);
  padding: 5px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(18, 173, 168, 0.1);
}

.v-hero-title {
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 12px;
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.4px;
}

.v-hero-desc {
  font-size: 1.02rem;
  line-height: 1.6;
  color: #CBD5E1;
  max-width: 820px;
  margin: 0 auto 20px auto;
  font-weight: 400;
}

.v-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 960px;
  margin: 0 auto;
}

.v-hero-badge-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #E2E8F0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.v-hero-badge-card:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(162, 232, 246, 0.5);
  transform: translateY(-2px);
}

/* SaaS Main Layout & Sections */
.v-main-container {
  padding-top: 48px;
  padding-bottom: 24px;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.prose {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #2D3748;
}

.prose p,
article.prose p {
  text-align: left;
}

.v-section {
  margin-bottom: 64px;
}

.v-section:last-of-type,
section.v-section:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.v-section-head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 52px auto;
}

.v-section-title {
  color: var(--navy) !important;
  font-size: 2.25rem;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}

.v-section-desc {
  color: #64748B;
  font-size: 1.1rem;
  line-height: 1.75;
}

/* Grids & Cards */
.v-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.v-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.v-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  border-color: #CBD5E1;
}

.v-card-alert {
  border-top: 4px solid #EF4444;
}

.v-card-teal {
  border-left: 5px solid #12ADA8;
}

.v-card-navy {
  border-top: 4px solid var(--navy);
}

.v-card-blue {
  border-top: 4px solid #3B82F6;
}

.v-card-title {
  color: var(--navy) !important;
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 12px;
  font-family: 'Poppins', sans-serif;
}

.v-card-text {
  font-size: 0.98rem;
  color: #475569;
  margin: 0;
  line-height: 1.75;
}

.v-card-list {
  padding-left: 18px;
  margin: 14px 0 0 0;
  color: #334155;
  font-size: 0.94rem;
  line-height: 1.7;
}

.v-card-list li {
  margin-bottom: 8px;
}

.v-card-list li:last-child {
  margin-bottom: 0;
}

/* 6-Stage Workflow & Card Containers */
.v-workflow-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 44px;
  margin-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.v-step-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
  margin-bottom: 24px;
}

.v-step-card:last-child {
  margin-bottom: 0;
}

.v-step-card:hover {
  border-color: #12ADA8;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(18, 173, 168, 0.12);
}

.v-usecase-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.v-usecase-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 5px solid #12ADA8;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  transition: all 0.3s ease;
  margin-bottom: 24px;
}

.v-usecase-card:last-child {
  margin-bottom: 0;
}

.v-usecase-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.v-step-num {
  background: rgba(18, 173, 168, 0.1);
  color: #12ADA8;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 18px;
}

.v-step-title {
  color: var(--navy) !important;
  font-size: 1.18rem;
  font-weight: 700;
  margin-bottom: 10px;
  font-family: 'Poppins', sans-serif;
}

.v-step-desc {
  color: #475569;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.65;
}

/* Dark Glass Banner / Why Section */
.v-dark-banner {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 20px;
  padding: 60px 44px;
  color: #FFFFFF;
  margin-bottom: 64px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
}

.v-dark-banner .v-section-title {
  color: #FFFFFF !important;
}

.v-dark-banner .v-section-desc {
  color: #CBD5E1;
}

.v-glass-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 28px;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}

.v-glass-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(162, 232, 246, 0.4);
  transform: translateY(-3px);
}

.v-glass-card-title {
  color: #A2E8F6 !important;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 12px;
  font-family: 'Poppins', sans-serif;
}

.v-glass-card-desc {
  color: #E2E8F0;
  font-size: 0.96rem;
  margin: 0;
  line-height: 1.65;
}

/* Real-World Use Cases */
.v-usecase-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.v-usecase-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 5px solid #12ADA8;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  transition: all 0.3s ease;
}

.v-usecase-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.v-usecase-title {
  color: var(--navy) !important;
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 12px;
  font-family: 'Poppins', sans-serif;
}

.v-usecase-challenge {
  color: #475569;
  margin-bottom: 16px;
  font-size: 0.98rem;
  line-height: 1.7;
}

.v-usecase-solution {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px 24px;
  font-size: 0.96rem;
  color: #334155;
  line-height: 1.75;
}

/* AI Overview & Governance Blocks */
.v-ai-block {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.v-ai-block-teal {
  border-left: 5px solid #12ADA8;
}

.v-ai-block-red {
  border-left: 5px solid #EF4444;
}

.v-ai-title {
  color: var(--navy) !important;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Poppins', sans-serif;
}

.v-ai-text {
  color: #475569;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.75;
}

.v-governance-box {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 64px;
}

.v-quote-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 24px;
}

/* Comparison Table */
.v-table-wrapper {
  overflow-x: auto;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
  background: #FFFFFF;
}

.v-compare-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.95rem;
}

.v-compare-table th {
  padding: 20px 24px;
  border-bottom: 2px solid #334155;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

.v-compare-table th.v-veridex-head {
  border-bottom: 2px solid #A2E8F6;
  background: #1E293B;
  color: #A2E8F6;
}

.v-compare-table td {
  padding: 18px 24px;
  border-bottom: 1px solid #E2E8F0;
  vertical-align: middle;
}

.v-compare-table tr:last-child td {
  border-bottom: none;
}

.v-compare-table tr:nth-child(even) {
  background: #F8FAFC;
}

.v-compare-table td.v-veridex-cell {
  font-weight: 700;
  color: #059669;
  background: #F0FDF4;
}

/* Modern FAQ Accordion */
.v-faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.v-faq-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 22px 28px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
  transition: all 0.25s ease;
}

.v-faq-item[open] {
  border-color: #CBD5E1;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

.v-faq-summary {
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  font-size: 1.08rem;
  font-family: 'Poppins', sans-serif;
  outline: none;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.v-faq-summary::-webkit-details-marker {
  display: none;
}

.v-faq-summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 600;
  color: #12ADA8;
  transition: transform 0.2s ease;
  margin-left: 12px;
}

.v-faq-item[open] .v-faq-summary::after {
  content: '\u2212';
}

.v-faq-content {
  margin-top: 14px;
  color: #475569;
  font-size: 0.98rem;
  line-height: 1.75;
}

/* High-Converting CTA Banner */
.v-cta-banner {
  background: linear-gradient(135deg, #12ADA8 0%, #0F172A 100%);
  border-radius: 20px;
  padding: 64px 44px;
  text-align: center;
  color: #FFFFFF;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.15);
  position: relative;
  overflow: hidden;
  margin-bottom: 64px;
}

.v-cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(162, 232, 246, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.v-cta-container {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.v-cta-title {
  font-size: 2.5rem;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  margin-top: 0;
  margin-bottom: 18px;
  color: #FFFFFF !important;
  letter-spacing: -0.4px;
}

.v-cta-desc {
  font-size: 1.18rem;
  line-height: 1.75;
  color: #E2E8F0;
  margin-bottom: 36px;
}

.v-cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.v-cta-actions .v-btn-primary,
.v-cta-actions a.v-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.98rem;
  font-family: 'Inter', sans-serif;
  text-decoration: none !important;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.v-cta-actions .v-btn-primary:hover,
.v-cta-actions a.v-btn-primary:hover {
  background: #F8FAFC !important;
  color: #12ADA8 !important;
  border-color: #F8FAFC !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.v-cta-actions .v-btn-secondary,
.v-cta-actions a.v-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.98rem;
  font-family: 'Inter', sans-serif;
  text-decoration: none !important;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
  cursor: pointer;
}

.v-cta-actions .v-btn-secondary:hover,
.v-cta-actions a.v-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Responsive Styles for VERIDEX Product Suite & Site Components */
@media (max-width: 992px) {
  .v-product-hero {
    padding: 36px 0 30px 0;
  }
  .v-hero-title {
    font-size: 2rem;
  }
  .v-cta-title {
    font-size: 1.85rem;
  }
  .v-workflow-box {
    padding: 32px 20px;
  }
  .v-dark-banner {
    padding: 32px 20px;
  }
  .header-search .search-box {
    max-width: 150px;
  }
}

@media (max-width: 768px) {
  .v-product-hero {
    padding: 28px 0 24px 0;
  }
  .v-hero-title {
    font-size: 1.65rem;
  }
  .v-hero-desc {
    font-size: 0.95rem;
  }
  .v-hero-highlights {
    grid-template-columns: 1fr;
  }
  .v-section-title {
    font-size: 1.8rem;
  }
  .v-main-container {
    padding-top: 36px;
    padding-bottom: 60px;
  }
  .v-section {
    margin-bottom: 48px;
  }
  .v-cta-banner {
    padding: 44px 20px;
  }
  .v-cta-title {
    font-size: 1.65rem;
  }
  .v-card {
    padding: 24px;
  }
  .v-usecase-card {
    padding: 24px;
  }
  .v-ai-block {
    padding: 20px;
  }
  .v-compare-table {
    min-width: 580px;
  }
  .v-compare-table th,
  .v-compare-table td {
    padding: 14px 16px;
    font-size: 0.88rem;
  }
}

@media (max-width: 640px) {
  .footer-newsletter {
    padding: 32px 20px;
    text-align: center;
  }
  .newsletter-form {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .newsletter-form input,
  .newsletter-form .btn-subscribe {
    width: 100%;
    border-radius: 10px;
  }
  .v-hero-badge-card {
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .header-search {
    display: none;
  }
  .v-hero-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
  }
  .v-hero-badge-card {
    width: 100%;
    justify-content: center;
    padding: 8px 10px;
    font-size: 0.74rem;
  }
  .v-hero-title {
    font-size: 1.45rem;
  }
  .archive-filter-nav {
    padding: 4px 0;
  }
  .scroll-arrow {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 16px !important;
    margin: 0 2px !important;
  }
  .filter-scroll-wrapper {
    padding: 6px 8px !important;
    gap: 6px !important;
  }
}

/* ==========================================================================
   Executive Problem-Solution Framework Redesign
   ========================================================================== */
.exec-framework-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-top: 4px solid #12ADA8;
  border-radius: 16px;
  padding: 28px 32px;
  margin: 36px 0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.exec-framework-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #F1F5F9;
  flex-wrap: wrap;
  gap: 12px;
}

.exec-framework-title {
  color: #FFFFFF !important;
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
}

.exec-framework-tag {
  background: rgba(18, 173, 168, 0.1);
  color: #12ADA8;
  border: 1px solid rgba(18, 173, 168, 0.25);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.8px;
}

.exec-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  .exec-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .exec-card-grid {
    grid-template-columns: 1fr;
  }
}

.exec-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  position: relative;
}

.exec-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  border-color: #CBD5E1;
}

.exec-card-step {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #64748B;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.exec-card-heading {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
  font-family: 'Poppins', sans-serif;
  line-height: 1.35;
}

.exec-card-text {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

/* Card 4 Highlight \u2014 The VERIDEX Solution */
.exec-card-solution {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border: 1px solid #12ADA8;
  color: #FFFFFF;
  box-shadow: 0 8px 25px rgba(18, 173, 168, 0.2);
}

.exec-card-solution:hover {
  border-color: #A2E8F6;
  box-shadow: 0 12px 30px rgba(18, 173, 168, 0.3);
}

.exec-card-solution .exec-card-step {
  color: #A2E8F6;
}

.exec-card-solution .exec-card-heading {
  color: #FFFFFF;
}

.exec-card-solution .exec-card-text {
  color: #E2E8F0;
}




/* ==========================================================================
   Global Responsive Container & Section Spacing
   Standardizes layout width and vertical padding across all pages to match
   the About Us page enterprise-style centered layout.
   ========================================================================== */

/* Tablet: \u2264 992px */
@media (max-width: 992px) {
  .container {
    padding: 0 32px;
  }
  .section {
    padding: var(--section-pad-tablet) 0;
  }
  .section.tight {
    padding: calc(var(--section-pad-tablet) * 0.75) 0;
  }
}

/* Mobile: \u2264 640px */
@media (max-width: 640px) {
  .container {
    padding: 0 16px;
  }
  .section {
    padding: var(--section-pad-mobile) 0;
  }
  .section.tight {
    padding: calc(var(--section-pad-mobile) * 0.75) 0;
  }
}

/* ==========================================================================
   ENTERPRISE SAAS VERIDEX PRODUCT PAGE STYLING SYSTEM
   ========================================================================== */

/* 1. HERO SECTION */
.v-product-hero {
  background: linear-gradient(135deg, #0B2545 0%, #06152B 50%, #0A4E6B 100%);
  color: #FFFFFF;
  padding: 52px 0 44px;
  position: relative;
  overflow: hidden;
}
.v-product-hero::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.v-product-hero::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(10, 78, 107, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.v-product-hero .container {
  position: relative;
  z-index: 2;
}

.v-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 173, 168, 0.16);
  border: 1px solid rgba(18, 173, 168, 0.4);
  color: #A2E8F6;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 24px;
  backdrop-filter: blur(6px);
}

.v-hero-title {
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 800;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  line-height: 1.15;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}

.v-hero-desc {
  font-size: 18px;
  color: #CBD5E1;
  max-width: 820px;
  margin: 0 auto 36px auto;
  line-height: 1.7;
  font-family: 'Inter', sans-serif;
  text-align: center;
}

.v-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 28px auto 0;
  max-width: 960px;
}

.v-hero-badge-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #F8FAFC;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.v-hero-badge-card:hover {
  transform: translateY(-3px);
  background: rgba(18, 173, 168, 0.15);
  border-color: rgba(18, 173, 168, 0.5);
  box-shadow: 0 8px 24px rgba(18, 173, 168, 0.2);
}

/* 2. FILTER NAV PILLS */
.archive-filter-nav {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 12px 0 !important;
  position: sticky !important;
  top: 70px !important;
  z-index: 999 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
.filter-nav-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.filter-scroll-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 4px 0 !important;
}
.filter-scroll-wrapper::-webkit-scrollbar {
  display: none !important;
}
.hero-category-chips .filter-pill,
.filter-scroll-wrapper .filter-pill,
.archive-filter-nav .filter-pill,
.filter-pill {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em !important;
  padding: 8px 20px !important;
  border-radius: 50px !important;
  border: 1.5px solid #CBD5E1 !important;
  background: #FFFFFF !important;
  color: #334155 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  outline: none !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 6px rgba(15, 45, 82, 0.04) !important;
}

.hero-category-chips .filter-pill:hover,
.filter-scroll-wrapper .filter-pill:hover,
.archive-filter-nav .filter-pill:hover,
.filter-pill:hover {
  border: 1.5px solid #12ADA8 !important;
  color: #0C8B87 !important;
  background: rgba(18, 173, 168, 0.05) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.18) !important;
}

.hero-category-chips .filter-pill.active,
.filter-scroll-wrapper .filter-pill.active,
.archive-filter-nav .filter-pill.active,
.filter-pill.active,
.filter-pill[aria-current="page"] {
  background: linear-gradient(135deg, #0B2545 0%, #12ADA8 100%) !important;
  border: 1.5px solid #12ADA8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(18, 173, 168, 0.35) !important;
}

/* 3. SECTIONS & LAYOUT */
.v-main-container {
  padding-top: 50px;
  padding-bottom: 80px;
}
.v-section {
  margin-bottom: 64px;
}
.v-section-head {
  margin-bottom: 36px;
}
.v-section-title {
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 800;
  color: #0B2545;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 14px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.v-section-desc {
  font-size: 16.5px;
  color: #475569;
  max-width: 800px;
  line-height: 1.7;
  margin: 0 0 16px;
}

/* 4. GRIDS & CARDS */
.v-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.v-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.v-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.v-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(11, 37, 69, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.v-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(11, 37, 69, 0.09);
  border-color: rgba(18, 173, 168, 0.4);
}
.v-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #0B2545;
  margin-bottom: 12px;
  font-family: 'Poppins', sans-serif;
}
.v-card-text {
  font-size: 14.5px;
  color: #64748B;
  line-height: 1.65;
  margin: 0;
}

/* Alert Card Variant */
.v-card-alert {
  border-left: 4px solid #EF4444;
  background: linear-gradient(180deg, #FFFFFF 0%, #FEF2F2 100%);
}
.v-card-alert .v-card-title {
  color: #991B1B;
}

/* 5. EXECUTIVE FRAMEWORK BOX */
.exec-framework-box {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 20px;
  padding: 36px;
  color: #FFFFFF;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16);
  margin: 36px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.exec-framework-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.exec-framework-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF !important;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}
.exec-framework-tag {
  background: rgba(18, 173, 168, 0.2);
  border: 1px solid rgba(18, 173, 168, 0.4);
  color: #A2E8F6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 50px;
}
.exec-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.exec-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 22px;
  transition: all 0.3s ease;
}
.exec-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(18, 173, 168, 0.4);
  transform: translateY(-3px);
}
.exec-card-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.exec-card-heading {
  font-size: 15.5px;
  font-weight: 700;
  color: #F8FAFC;
  margin-bottom: 8px;
}
.exec-card-text {
  font-size: 13.5px;
  color: #CBD5E1;
  line-height: 1.6;
  margin: 0;
}
.exec-card-solution {
  background: linear-gradient(135deg, rgba(18, 173, 168, 0.25) 0%, rgba(10, 78, 107, 0.3) 100%);
  border-color: rgba(18, 173, 168, 0.5);
}

/* 6. STEP CARDS & WORKFLOW */
.v-workflow-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 40px;
}
.v-step-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 24px;
  position: relative;
  box-shadow: 0 4px 14px rgba(11, 37, 69, 0.03);
  transition: all 0.3s ease;
}
.v-step-card:hover {
  transform: translateY(-4px);
  border-color: #12ADA8;
  box-shadow: 0 12px 28px rgba(18, 173, 168, 0.12);
}
.v-step-num {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #12ADA8, #0B2545);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.v-step-title {
  font-size: 16.5px;
  font-weight: 700;
  color: #0B2545;
  margin-bottom: 10px;
  font-family: 'Poppins', sans-serif;
}
.v-step-desc {
  font-size: 14px;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}

/* 7. RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
  .v-grid-3, .exec-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .v-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .v-product-hero {
    padding: 60px 0 50px;
  }
  .v-grid-3, .v-grid-2, .v-grid-4, .exec-card-grid {
    grid-template-columns: 1fr;
  }
  .exec-framework-box {
    padding: 24px;
  }
  .v-workflow-box {
    padding: 24px;
  }
}


/* ==========================================================================
   GLOBAL HEADER \u2014 Veridex-Style White Sticky Header (All Pages)
   Forces the same white/glassmorphic sticky header across every page.
   Placed at end of file to guarantee cascade priority.
   ========================================================================== */
header.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(11, 37, 69, 0.05) !important;
  transition: box-shadow 0.3s ease !important;
}

header.site-header .header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 24px !important;
  max-width: var(--maxw) !important;
  margin: 0 auto !important;
  position: relative !important;
}

/* Logo: Dark text on white header */
header.site-header .logo {
  color: var(--navy) !important;
}
header.site-header .logo .brand-text {
  color: var(--navy) !important;
}
header.site-header .logo .brand-hl {
  color: var(--teal) !important;
}
header.site-header .logo .mark {
  background: linear-gradient(135deg, var(--navy), var(--teal)) !important;
  box-shadow: 0 4px 12px rgba(18, 173, 168, 0.32) !important;
}

/* Nav links: Dark text on white header with Dynamic Gradient Pill & Bottom Glow Indicator */
header.site-header nav.main-nav>ul>li>a {
  color: var(--navy) !important;
  padding: 7px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

header.site-header nav.main-nav>ul>li>a:hover,
header.site-header nav.main-nav>ul>li.has-dropdown:hover>a,
header.site-header nav.main-nav>ul>li.has-dropdown.is-hovered>a,
header.site-header nav.main-nav>ul>li.has-dropdown.open>a {
  color: #0c8b87 !important;
  background: rgba(18, 173, 168, 0.07) !important;
  border-bottom: 2px solid rgba(18, 173, 168, 0.4) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Active Nav State: Gradient Pill + Glowing Bottom Line */
header.site-header nav.main-nav>ul>li>a.active,
header.site-header nav.main-nav>ul>li.has-dropdown>a.active,
header.site-header nav.main-nav>ul>li.has-dropdown>a.dropdown-trigger.active {
  color: #075e5a !important;
  background: linear-gradient(135deg, rgba(18, 173, 168, 0.18), rgba(10, 78, 107, 0.08)) !important;
  border: 1px solid rgba(18, 173, 168, 0.25) !important;
  border-bottom: 3.5px solid #12ADA8 !important;
  box-shadow: 0 4px 16px rgba(18, 173, 168, 0.28), 0 2px 8px rgba(18, 173, 168, 0.18) !important;
  font-weight: 700 !important;
  transform: translateY(-1px) !important;
}


/* Search box: Light bg on white header */
header.site-header .header-search .search-box {
  background: var(--bg-light) !important;
  border: 1px solid var(--border) !important;
}
header.site-header .header-search input {
  color: var(--navy) !important;
}
header.site-header .header-search button {
  background: var(--navy) !important;
  color: var(--white) !important;
}
header.site-header .header-search button:hover {
  background: var(--teal) !important;
}

/* Menu toggle: Dark icon on white header */
header.site-header .menu-toggle {
  color: var(--navy) !important;
}

/* Enhanced Dropdown Menu Animation & Styling */
header.site-header .dropdown-menu {
  display: none !important;
  animation: dtlDropdownEntrance 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  box-shadow: 0 16px 40px rgba(11, 37, 69, 0.16), 0 4px 14px rgba(18, 173, 168, 0.12) !important;
  border-top: 3px solid #12ADA8 !important;
  border-radius: 0 0 12px 12px !important;
}

header.site-header nav.main-nav ul li.has-dropdown:hover > .dropdown-menu,
header.site-header nav.main-nav ul li.has-dropdown.is-hovered > .dropdown-menu,
header.site-header nav.main-nav ul li.has-dropdown.open > .dropdown-menu {
  display: flex !important;
}

@keyframes dtlDropdownEntrance {
  from { opacity: 0; transform: translate(-50%, 8px) scale(0.97); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

header.site-header .dropdown-menu li a {
  transition: all 0.2s ease !important;
  border-left: 3px solid transparent !important;
}

header.site-header .dropdown-menu li a:hover,
header.site-header .dropdown-menu li a.active {
  background: rgba(18, 173, 168, 0.1) !important;
  color: #0c8b87 !important;
  border-left: 3px solid #12ADA8 !important;
  padding-left: 20px !important;
}

/* ==========================================================================
   Post Bottom Components: Related Tool Card & 4 Related Posts
   ========================================================================== */

.post-related-tool-section {
  margin: 48px 0 36px;
  width: 100%;
}

.related-tool-showcase-card {
  background: #FFFFFF;
  border: 1px solid rgba(18, 173, 168, 0.22);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(11, 37, 69, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
}

.related-tool-showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(11, 37, 69, 0.12), 0 4px 18px rgba(18, 173, 168, 0.15);
  border-color: rgba(18, 173, 168, 0.45);
}

.related-tool-showcase-card::before {
  content: '';
  display: block;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #12ADA8 0%, #0B2545 100%);
}

.related-tool-inner {
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
}

.related-tool-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.related-tool-badge-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.related-tool-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0B2545 0%, #12ADA8 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.25);
  flex-shrink: 0;
}

.related-tool-meta-labels {
  display: flex;
  flex-direction: column;
}

.related-tool-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--teal-dark);
}

.related-tool-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy);
  margin: 2px 0 0 0;
  line-height: 1.25;
}

.related-tool-privacy-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #0C8B87;
  background: rgba(18, 173, 168, 0.1);
  border: 1px solid rgba(18, 173, 168, 0.25);
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.related-tool-desc {
  font-size: 0.96rem;
  color: var(--gray);
  line-height: 1.65;
  margin: 0 0 20px 0;
}

.related-tool-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.related-tool-tag {
  font-size: 12px;
  font-weight: 600;
  color: #0B2545;
  background: #F0F4FF;
  border: 1px solid #D0D8F0;
  padding: 5px 13px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.related-tool-tag:hover {
  background: #E4ECFF;
  border-color: #BACBEE;
}

.related-tool-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #E2E8F0;
  padding-top: 20px;
  margin-top: 4px;
  flex-wrap: wrap;
  gap: 14px;
}

.btn-launch-related-tool {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal-dark) 100%);
  color: var(--white);
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(11, 37, 69, 0.2);
}

.btn-launch-related-tool:hover {
  background: linear-gradient(135deg, var(--teal-dark) 0%, var(--navy) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(18, 173, 168, 0.35);
  color: var(--white);
}

/* Related Posts Section */
.post-related-posts-section {
  margin: 40px 0 48px;
  padding-top: 36px;
  border-top: 1px solid #E2E8F0;
  width: 100%;
}

.related-posts-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.related-posts-header .eyebrow {
  margin-bottom: 4px;
}

.related-posts-title-box h3 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--navy);
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1024px) {
  .related-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .related-posts-grid {
    grid-template-columns: 1fr;
  }
  .related-tool-inner {
    padding: 22px 20px;
  }
  .related-tool-top-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.related-post-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.related-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(11, 37, 69, 0.09);
  border-color: var(--teal);
}

.related-post-card-cat {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--teal-dark);
  background: rgba(18, 173, 168, 0.09);
  border: 1px solid rgba(18, 173, 168, 0.2);
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 12px;
  align-self: flex-start;
}

.related-post-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.related-post-card:hover .related-post-card-title {
  color: var(--teal-dark);
}

.related-post-card-excerpt {
  font-size: 0.86rem;
  color: var(--gray);
  line-height: 1.55;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.related-post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px dashed #E2E8F0;
  font-size: 0.8rem;
  color: var(--gray);
  margin-top: auto;
}

.related-post-card-link {
  color: var(--teal-dark);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}










/* ================================================================================
   ASTRA THEME HIGH-SPECIFICITY OVERRIDE RESETS FOR DISCOVERYTECHLAB
   ================================================================================ */

html, body, body.page, body.single, #page, .site, .site-content, #primary, #main, 
.ast-container, .ast-plain-container, .ast-page-builder-template, .entry-content, article {
    background-color: #0B0F19 !important;
    color: #E2E8F0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#masthead, #colophon, .ast-archive-description, .entry-header, 
.ast-single-post-order, .site-header-primary-section-wrapper, 
.site-footer-primary-section-wrapper, .ast-header-break-point .main-header-bar,
.ast-small-footer, .ast-breadcrumbs-wrapper, .dtl-skip-link {
    display: none !important;
}

.entry-content ul, .entry-content ol, ul, ol {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.entry-content ul li, .entry-content ol li, ul li, ol li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.entry-content a {
    text-decoration: none !important;
    color: inherit;
}

.site-header {
    background: #0B0F19 !important;
    background-color: #0B0F19 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    z-index: 9999 !important;
    width: 100% !important;
    padding: 16px 0 !important;
}

.site-header .header-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.site-header .logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}

.main-nav {
    display: block !important;
}

.main-nav ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 24px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.main-nav ul li {
    display: inline-block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.main-nav a {
    color: #E2E8F0 !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.main-nav a:hover, .main-nav a.active {
    color: #4FD1C5 !important;
}

.header-search {
    display: flex !important;
    align-items: center !important;
}

.header-search .search-box {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
}

.header-search input {
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    outline: none !important;
    font-size: 0.875rem !important;
    padding: 4px 8px !important;
}

.header-search button {
    background: transparent !important;
    border: none !important;
    color: #A0AEC0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
}


/*
 Theme Name:   Astra Child - DiscoveryTechLab VERIDEX
 Theme URI:    https://discoverytechlab.com/
 Description:  Custom Astra Child Theme for VERIDEX eDiscovery Platform
 Author:       DiscoveryTechLab Engineering Team
 Template:     astra
 Version:      1.0.0
*/

/* ==========================================================================
   DiscoveryTechLab \u2014 Complete Design System & Stylesheet
   Confirmed Tokens, Typography, Layout & Interactive States
   ========================================================================== */

:root {
  /* Color Palette (Section 2 - Confirmed Exact Hex Values) */
  --navy: #0B2545;
  --navy-2: #123163;
  --teal: #12ADA8;
  --teal-dark: #0C8B87;
  --text: #2B2B2B;
  --gray: #6B7280;
  --bg-light: #F5F7FA;
  --white: #FFFFFF;
  --border: #E6E9EF;

  /* Layout & Spacing (Section 1 & 16) */
  --radius: 14px;
  /* Confirmed 14px border radius for cards & images */
  --radius-sm: 8px;
  --maxw: 1440px;
  --section-pad-desktop: 80px;
  --section-pad-tablet: 60px;
  --section-pad-mobile: 40px;

  /* Shadows & Transitions */
  --shadow: 0 10px 30px rgba(11, 37, 69, 0.08);
  --shadow-hover: 0 18px 40px rgba(11, 37, 69, 0.10);
  --transition: 0.25s ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--teal) var(--bg-light);
}

/* Custom Browser Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
  background: var(--teal);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--teal-dark);
}


body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.8;
  /* Roomier 1.8 line-height per Section 3 */
}

/* Skip Navigation Link (A11Y-05 / WCAG 2.4.1) */
.dtl-skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  background: #0B2545;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: 14px;
  z-index: 99999;
  text-decoration: none;
  transition: top 0.2s ease;
}

.dtl-skip-link:focus {
  top: 0;
  outline: 3px solid #12ADA8;
  outline-offset: 2px;
}

/* Comprehensive Typography & Form Element Inheritance Resets */
button,
input,
select,
textarea,
optgroup {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* Input Placeholder Typography & Color Inheritance */
::placeholder,
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  font-family: inherit;
  color: inherit;
  opacity: 0.65;
}

/* Monospace Code & Structural Typography Inheritance */
code,
kbd,
samp,
pre {
  font-family: SFMono-Regular, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;
  font-size: 0.92em;
}

/* Table & Fieldset Typography Inheritance */
table,
th,
td,
caption,
fieldset,
legend {
  font-family: inherit;
  color: inherit;
}

/* Container & WordPress / Astra / Elementor Inheritance Normalization */
.entry-content,
.widget,
.ast-container,
.elementor-widget-container {
  font-family: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Poppins', 'Inter', sans-serif;
  color: var(--navy);
  margin: 0 0 0.5em;
  font-weight: 700;
  line-height: 1.15;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

/* Global Container: Centered layout wrapper \u2014 1320px max-width with 24px horizontal padding.
   Applies universally to all pages (Home, VERIDEX, Category, About, etc.).
   ASTRA-01 NOTE: These scoped selectors are retained as reinforcement for WordPress/Astra/Elementor
   environments where Astra's .ast-container may conflict. The global rule handles all standalone pages. */
.container,
body.tools-archive-page .container,
body.blog-archive-page .container,
body.single-post-page .container,
body.page-veridex .container,
.single-post-container,
.about-main-container {
  width: 100% !important;
  max-width: var(--maxw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Eyebrow / Label Text (Section 3) */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal-dark);
  margin-bottom: 10px;
  display: block;
}

/* Sections */
.section {
  padding: var(--section-pad-desktop) 0;
}

.section.tight {
  padding: var(--section-pad-tablet) 0;
}

.section.light {
  background: var(--bg-light);
}

.section-head {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-head p {
  color: var(--gray);
  font-size: 17px;
  line-height: 1.7;
  text-align: center !important;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid var(--navy);
  color: var(--navy);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}

.btn:hover {
  background: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 37, 69, 0.15);
}

.btn.solid {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

.btn.solid:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(18, 173, 168, 0.25);
}

/* ==========================================================================
   Header & Sticky Navigation (Section 1 & 4)
   ========================================================================== */
/* ASTRA-02: Scoped to this page's body class to prevent conflicting with Astra's own
   sticky header (z-index: 9999) and its Customizer-controlled header styles on all other pages.
   In WordPress + Astra, this header is replaced by the Astra header component. */
body.tools-archive-page header.site-header,
body.page-veridex header.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.97); /* Solid fallback */
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(11, 37, 69, 0.05);
}

@supports (backdrop-filter: blur(10px)) {
  body.tools-archive-page header.site-header,
  body.page-veridex header.site-header {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 22px;
  text-decoration: none;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.logo .mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(18, 173, 168, 0.32);
  transition: transform var(--transition);
  flex-shrink: 0;
}

.logo:hover .mark {
  background: linear-gradient(135deg, var(--teal), var(--navy));
}

.logo .brand-text {
  color: var(--navy);
}

.logo .brand-hl {
  color: var(--teal);
  font-weight: 700;
}

nav.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Main Header Search Bar */
.header-search {
  margin-left: 20px;
}

.header-search .search-box {
  display: flex;
  align-items: center;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 6px 4px 14px;
  transition: all var(--transition);
  max-width: 220px;
}

.header-search .search-box:focus-within {
  border-color: var(--teal) !important;
  background: var(--white) !important;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.2) !important;
  max-width: 200px !important;
  width: 200px !important;
}

.header-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: var(--navy);
  width: 100%;
  font-family: inherit;
}

.header-search button {
  border: none;
  background: var(--navy);
  color: var(--white);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  flex-shrink: 0;
}

.header-search button:hover {
  background: var(--teal);
}

nav.main-nav > ul > li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

nav.main-nav a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--navy) !important;
  padding: 7px 14px !important;
  border-bottom: 3px solid transparent !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

nav.main-nav a:hover,
nav.main-nav a.active {
  color: var(--teal-dark);
  border-bottom-color: var(--teal);
  background: transparent;
}

/* Fix C-05: Removed duplicate header.site-header declaration (was identical to lines 207-224).
   Megamenu Navigation Enhancements continue below. */

nav.main-nav ul li.has-megamenu {
  position: relative !important;
}

nav.main-nav ul li.has-megamenu:hover>a,
nav.main-nav ul li.has-megamenu.is-hovered>a,
nav.main-nav ul li.has-megamenu.open>a {
  color: var(--teal-dark) !important;
  background: rgba(18, 173, 168, 0.1) !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  border-bottom-color: transparent !important;
}

nav.main-nav a .caret {
  font-size: 10px;
  line-height: 1;
  margin-top: -1px;
  transition: transform 0.2s ease, color 0.2s ease;
}

nav.main-nav ul li.has-megamenu:hover>a .caret,
nav.main-nav ul li.has-megamenu.is-hovered>a .caret,
nav.main-nav ul li.has-megamenu.open>a .caret {
  transform: rotate(180deg);
  color: var(--teal-dark);
}

.megamenu-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 24px;
  right: 24px;
  width: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 20px 45px rgba(11, 37, 69, 0.18);
  padding: 20px 28px 28px;
  z-index: 1200;
  max-height: 75vh;
  overflow-y: auto;
}

/* Simple Dropdown Menu Styling */
nav.main-nav ul li.has-dropdown,
.site-header nav.main-nav > ul > li.has-dropdown {
  position: relative !important;
}

nav.main-nav ul li.has-dropdown:hover > a,
nav.main-nav ul li.has-dropdown.is-hovered > a,
nav.main-nav ul li.has-dropdown.open > a {
  color: #0c8b87 !important;
  background: rgba(18, 173, 168, 0.12) !important;
  border-bottom: 5px solid #12ADA8 !important;
  border-radius: 6px !important;
}

nav.main-nav ul li.has-dropdown:hover > a .caret,
nav.main-nav ul li.has-dropdown.is-hovered > a .caret,
nav.main-nav ul li.has-dropdown.open > a .caret {
  transform: rotate(180deg);
  color: #0c8b87 !important;
}

/* Fix REC-07: !important is intentional here to override Astra/WordPress default nav UL styles
   which apply list-style, margin, padding globally. These !important guards prevent
   Astra theme stylesheet specificity from breaking the dropdown layout.
   This is the minimum required set; non-layout properties use standard specificity below. */
.dropdown-menu,
ul.dropdown-menu {
  display: none !important;        /* Must override Astra's default flex/block nav display */
  flex-direction: column !important;
  position: absolute !important;   /* Must escape Astra's position:relative nav containers */
  top: calc(100% + 4px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 175px !important;
  width: max-content !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid #12ADA8 !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 14px 36px rgba(11, 37, 69, 0.15) !important;
  padding: 6px 0 !important;       /* Must override Astra's ul padding */
  margin: 0 !important;            /* Must override Astra's ul margin */
  list-style: none !important;     /* Must override Astra's list-style */
  z-index: 1250 !important;
}

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 16px;
  background: transparent;
  pointer-events: auto;
}

nav.main-nav ul li.has-dropdown:hover > .dropdown-menu,
nav.main-nav ul li.has-dropdown.is-hovered > .dropdown-menu,
nav.main-nav ul li.has-dropdown.open > .dropdown-menu {
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.dropdown-menu li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.dropdown-menu li a {
  display: block !important;
  padding: 8px 16px !important;
  color: #0B2545 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  white-space: nowrap !important;
}

.dropdown-menu li a:hover {
  background: rgba(18, 173, 168, 0.08) !important;
  color: #0C8B87 !important;
  border-bottom: none !important;
}


/* Invisible hover bridge connecting trigger link to megamenu panel */
.megamenu-panel::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  height: 30px;
  background: transparent;
  pointer-events: auto;
  z-index: 1300;
}



.megamenu-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.megamenu-top-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.megamenu-top-badge {
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(18, 173, 168, 0.12);
  color: var(--teal-dark);
  padding: 3px 12px;
  border-radius: 20px;
}

.megamenu-panel::-webkit-scrollbar {
  width: 6px;
}

.megamenu-panel::-webkit-scrollbar-track {
  background: var(--bg-light);
}

.megamenu-panel::-webkit-scrollbar-thumb {
  background: var(--teal);
  border-radius: 4px;
}

nav.main-nav ul li.has-megamenu:hover .megamenu-panel,
nav.main-nav ul li.has-megamenu.is-hovered .megamenu-panel,
nav.main-nav ul li.has-megamenu.open .megamenu-panel {
  display: block;
}

.megamenu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 16px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.megamenu-cat {
  background: var(--bg-light);
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  transition: all var(--transition);
}

.megamenu-cat:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.12);
  background: #FFFFFF;
}

.megamenu-cat-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.25;
}

.megamenu-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.megamenu-links li {
  margin: 0 !important;
  padding: 0 !important;
}

.megamenu-links a {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border-bottom: none !important;
  display: block;
  line-height: 1.35 !important;
  transition: all var(--transition);
}

.megamenu-links a:hover {
  color: var(--teal-dark) !important;
  background: rgba(18, 173, 168, 0.1) !important;
  transform: translateX(2px);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  color: var(--navy);
  cursor: pointer;
  padding: 4px;
}

/* ==========================================================================
   Hero Section (Section 5)
   ========================================================================== */
.hero {
  padding: 110px 0 70px;
  text-align: center;
}

.hero h1 {
  font-size: 58px;
  /* Confirmed 58px desktop per Section 3 */
  max-width: 860px;
  margin: 0 auto 24px;
  font-weight: 800;
}

.hero .lead {
  font-size: 19px;
  color: var(--gray);
  max-width: 640px;
  margin: 0 auto 38px;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Topic Label Strip (Section 5 Deviation) */
.trust-strip {
  padding: 40px 0 90px;
}

.trust-strip .label {
  text-align: center;
  color: var(--gray);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 26px;
  font-weight: 600;
}

.trust-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  opacity: 0.75;
}

.trust-logos span {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  position: relative;
}

.trust-logos span:not(:last-child)::after {
  content: "\u00b7";
  position: absolute;
  right: -26px;
  color: var(--gray);
  opacity: 0.5;
}

/* ==========================================================================
   Feature Cards (3-Column) (Section 1 & 6)
   ========================================================================== */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}

.feature-card {
  background: var(--white);
  padding: 36px 30px;
  border-radius: var(--radius);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1.5px solid rgba(18, 173, 168, 0.35);
  box-shadow: 0 4px 18px rgba(11, 37, 69, 0.04);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--teal);
}

.feature-card .icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(18, 173, 168, 0.15), rgba(11, 37, 69, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.feature-card h4 {
  font-size: 15px;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  color: var(--navy);
}

.feature-card p,
.page-content .feature-card p {
  color: var(--gray);
  font-size: 15.5px;
  line-height: 1.7;
  margin-bottom: 24px;
  flex-grow: 1;
  text-align: left !important;
}

.feature-card .link {
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--teal-dark);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.feature-card:hover .link {
  color: var(--teal);
}

/* ==========================================================================
   Tabbed Feature Section (Section 7)
   ========================================================================== */
.tabs-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.tabs-nav button {
  padding: 12px 24px;
  border-radius: 30px;
  border: 1px solid var(--border);
  background: var(--white);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--navy);
  cursor: pointer;
  transition: all var(--transition);
}

.tabs-nav button:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.tabs-nav button.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  box-shadow: 0 4px 14px rgba(11, 37, 69, 0.2);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: grid;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

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

.tab-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 44px;
}

.tab-item {
  background: var(--white);
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
}

.tab-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.tab-item strong {
  display: block;
  color: var(--navy);
  font-size: 16.5px;
  margin-bottom: 8px;
  font-family: 'Poppins', sans-serif;
}

.tab-item p {
  color: var(--gray);
  font-size: 14.5px;
  margin: 0;
  line-height: 1.65;
}

/* ==========================================================================
   Audience Cards Section (Section 8)
   ========================================================================== */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.audience-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  height: 250px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  display: flex;
  align-items: flex-end;
  padding: 28px;
  color: #fff;
  transition: transform var(--transition), box-shadow var(--transition);
}

.audience-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(18, 173, 168, 0.45), transparent 65%);
  transition: opacity var(--transition);
}

.audience-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.audience-card:hover::after {
  opacity: 0.85;
}

.audience-card .txt {
  position: relative;
  z-index: 2;
}

.audience-card h4 {
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.audience-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.6;
}

/* ==========================================================================
   Editor Quote Block (Section 10)
   ========================================================================== */
.quote-block {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.quote-block p {
  font-size: 26px;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 24px;
  font-style: italic;
}

.quote-block .who {
  color: var(--gray);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Stats Counter Band (Section 11)
   ========================================================================== */
.stats-band {
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  border-radius: var(--radius);
  padding: 64px 40px;
  box-shadow: 0 16px 40px rgba(11, 37, 69, 0.15);
  position: relative;
  overflow: hidden;
}

.stats-band::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.15), transparent 70%);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.stat .num {
  font-size: 52px;
  font-weight: 800;
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  line-height: 1.1;
  margin-bottom: 8px;
}

.stat .lbl {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
}

/* ==========================================================================
   eDiscovery Lifecycle Section (EDRM Interactive Workflow - Enterprise SaaS Polish)
   ========================================================================== */
.ediscovery-lifecycle-section {
  background: linear-gradient(180deg, #071B38 0%, #0B2345 50%, #0F2D50 100%);
  background-image: radial-gradient(rgba(18, 173, 168, 0.12) 1px, transparent 1px), linear-gradient(180deg, #071B38 0%, #0B2345 50%, #0F2D50 100%);
  background-size: 32px 32px, 100% 100%;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  padding: 64px 0 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(37, 211, 196, 0.20);
}

.lifecycle-bg-glow {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 350px;
  background: radial-gradient(ellipse at center, rgba(37, 211, 196, 0.12) 0%, rgba(7, 27, 56, 0) 70%);
  pointer-events: none;
}

.ediscovery-lifecycle-section .badge-pill-glow {
  background: rgba(18, 173, 168, 0.14);
  color: #48E5E0;
  border: 1px solid rgba(18, 173, 168, 0.3);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ediscovery-lifecycle-section .title-gradient {
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  background: none;
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.25;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.ediscovery-lifecycle-section .title-gradient .highlight-teal {
  color: #48E5E0;
  background: linear-gradient(135deg, #48E5E0 0%, #12ADA8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ediscovery-lifecycle-section .section-lead-desc {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 660px;
  margin: 0 auto 12px;
}

.lifecycle-timeline-wrapper {
  position: relative;
  margin-top: 36px;
  margin-bottom: 28px;
}

/* Glowing Workflow Connector Line with Pulse Flow */
.timeline-track-line {
  position: absolute;
  top: 62px;
  transform: translateY(-50%);
  left: calc(100% / 14);
  right: calc(100% / 14);
  height: 3px;
  background: rgba(37, 211, 196, 0.35);
  opacity: 0.8;
  box-shadow: 0 0 10px rgba(72, 229, 224, 0.4);
  z-index: 1;
  border-radius: 2px;
}

.timeline-progress-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(37, 211, 196, 0.3) 0%, rgba(72, 229, 224, 0.9) 50%, rgba(37, 211, 196, 0.3) 100%);
  border-radius: 2px;
  background-size: 200% 100%;
  animation: pulseFlow 3s linear infinite;
}

@keyframes pulseFlow {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 200% 0%;
  }
}

.timeline-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #48E5E0;
  box-shadow: 0 0 8px rgba(72, 229, 224, 0.85);
  z-index: 2;
}

.dot-1 {
  left: 14.28%;
}

.dot-2 {
  left: 28.57%;
}

.dot-3 {
  left: 42.85%;
}

.dot-4 {
  left: 57.14%;
}

.dot-5 {
  left: 71.42%;
}

.dot-6 {
  left: 85.71%;
}

/* 7 Lifecycle Stages Grid */
.lifecycle-stages-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  position: relative;
  z-index: 2;
}

.lifecycle-stage-card {
  border-radius: 14px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 195px;
  background: linear-gradient(145deg, rgba(15, 38, 70, 0.75), rgba(9, 25, 48, 0.9));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.stage-card-alt-1 {
  background: linear-gradient(145deg, rgba(15, 38, 70, 0.85), rgba(9, 25, 48, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stage-card-alt-2 {
  background: linear-gradient(145deg, rgba(18, 173, 168, 0.08), rgba(9, 25, 48, 0.9));
  border: 1px solid rgba(37, 211, 196, 0.25);
}

.stage-number-badge {
  font-size: 9.5px;
  font-weight: 800;
  color: #48E5E0;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  background: rgba(18, 173, 168, 0.18);
  padding: 2px 7px;
  border-radius: 12px;
  border: 1px solid rgba(18, 173, 168, 0.3);
}

.stage-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #071931;
  border: 1px solid rgba(37, 211, 196, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #48E5E0;
  margin-bottom: 10px;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 3;
}

.stage-phase-tag {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 3px;
  font-weight: 600;
}

.lifecycle-stage-card h3 {
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.25;
  min-height: 34px;
  display: flex;
  align-items: flex-start;
}

.lifecycle-stage-card p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11.5px;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hover & Focus Animations */
.lifecycle-stage-card:hover {
  transform: translateY(-4px);
  border-color: rgba(18, 173, 168, 0.5);
  box-shadow: 0 12px 28px rgba(18, 173, 168, 0.22), 0 0 16px rgba(18, 173, 168, 0.12);
}

.lifecycle-stage-card:focus-visible {
  outline: 2px solid #48E5E0;
  outline-offset: 2px;
}

.lifecycle-stage-card:hover .stage-icon-wrap {
  background: #12ADA8;
  color: #FFFFFF;
  border-color: #12ADA8;
}

/* Premium Information Box */
.lifecycle-geo-note {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 4px solid #12ADA8;
  border-radius: 12px;
  padding: 14px 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
  max-width: 960px;
  margin: 0 auto 20px;
}

.geo-note-icon {
  flex-shrink: 0;
}

/* CTA Row Below Workflow */
.lifecycle-cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-lifecycle-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 30px;
  background: linear-gradient(135deg, #12ADA8 0%, #0C8B87 100%);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 20px rgba(18, 173, 168, 0.35);
}

.btn-lifecycle-cta:focus-visible {
  outline: 2px solid #48E5E0;
  outline-offset: 3px;
}

.btn-lifecycle-cta:hover {
  background: linear-gradient(135deg, #48E5E0 0%, #12ADA8 100%);
  color: #071931;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(18, 173, 168, 0.5);
}

.btn-lifecycle-cta svg {
  transition: transform 250ms ease;
}

.btn-lifecycle-cta:hover svg {
  transform: translateX(5px);
}

.geo-note-icon {
  flex-shrink: 0;
}

/* ==========================================================================
   Footer (Section 13 & 20/21 Requirements - Darker Distinct #061A33)
   ========================================================================== */
/* ==========================================================================
   Footer (Section 13 & 20/21 Requirements - Enterprise SaaS Polish)
   ========================================================================== */
footer.site-footer {
  background: #061A33;
  color: rgba(255, 255, 255, 0.85);
  padding: 32px 0 0;
  border-top: 1px solid rgba(37, 211, 196, 0.20);
  position: relative;
  overflow: hidden;
}

footer.site-footer .container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

footer.site-footer::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.06) 0%, rgba(18, 173, 168, 0) 70%);
  pointer-events: none;
}

/* SECTION 1: Full-Width Newsletter CTA (Flexible Left / Right) */
.footer-newsletter {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 14px;
  padding: 24px 32px;
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  position: relative;
  z-index: 2;
}

.newsletter-content {
  flex: 1 1 auto;
  min-width: 0;
}

.newsletter-heading {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.newsletter-desc {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13.5px;
  margin: 0;
  line-height: 1.45;
  max-width: 580px;
}

.newsletter-action {
  flex: 0 0 auto;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.newsletter-form {
  display: flex;
  gap: 8px;
  width: 100%;
}

.newsletter-form input[type="email"] {
  padding: 9px 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  outline: none;
  font-size: 13px;
  flex-grow: 1;
  font-family: inherit;
  transition: all var(--transition);
}

.newsletter-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.newsletter-form input[type="email"]:focus {
  border-color: #12ADA8;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 12px rgba(18, 173, 168, 0.35);
}

.btn-subscribe {
  padding: 9px 18px;
  border-radius: 24px;
  background: #12ADA8;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
  box-shadow: 0 4px 12px rgba(18, 173, 168, 0.3);
  flex-shrink: 0;
}

.btn-subscribe:hover {
  background: #0C8B87;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(18, 173, 168, 0.45);
}

.newsletter-trust-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
  padding-left: 4px;
}

.newsletter-trust-note svg {
  color: #12ADA8;
  flex-shrink: 0;
}

/* SECTION 2: Responsive 4-Column Grid (36% | 21% | 21% | 22%) */
.footer-top {
  display: grid;
  grid-template-columns: 36% 21% 21% 22%;
  gap: 28px;
  align-items: start;
  padding-bottom: 28px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-brand-col .logo {
  color: #FFFFFF;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer-brand-col .logo .brand-text {
  color: #FFFFFF !important;
  font-size: 17px;
  font-weight: 700;
}

.footer-brand-col .logo .brand-hl {
  color: #48E5E0 !important;
}

.footer-brand-col .logo .mark {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(18, 173, 168, 0.45)) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
}

.footer-desc {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 14px;
  max-width: 350px;
  text-align: justify;
}

.footer-founder-info {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 12px;
  border-radius: 8px;
  width: 100%;
  max-width: 350px;
}

.founder-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}

.founder-name {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
}

.founder-title {
  font-size: 11.5px;
  color: #48E5E0;
  font-weight: 500;
}

.social-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.social-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: all var(--transition);
  text-decoration: none;
  flex-shrink: 0;
}

.social-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  display: block;
}

.social-btn:hover {
  background: #12ADA8;
  border-color: #12ADA8;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(18, 173, 168, 0.4);
}

.footer-heading {
  color: #FFFFFF;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0;
  margin-bottom: 14px;
  font-weight: 700;
  position: relative;
  display: inline-block;
  line-height: 1.2;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 22px;
  height: 2px;
  background: #12ADA8;
  border-radius: 2px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links li {
  margin: 0;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.5;
  transition: all 250ms ease;
  display: inline-block;
}

.footer-links a:hover {
  color: #12ADA8;
  transform: translateX(4px);
}

/* SECTION 3: SEO Popular Topics Row */
.footer-seo {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  text-align: center;
}

.seo-title {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}

.seo-links-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.seo-links-list a {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  transition: all var(--transition);
}

.seo-links-list a:hover {
  color: #48E5E0;
  text-decoration: underline;
  text-shadow: 0 0 8px rgba(72, 229, 224, 0.3);
}

.seo-links-list .sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
}

/* SECTION 4: Bottom Bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
}

.footer-bottom .copyright {
  color: rgba(255, 255, 255, 0.65);
}

.trust-badge-bar {
  color: rgba(255, 255, 255, 0.55);
}

.trust-badge-bar .sep {
  color: #12ADA8;
  margin: 0 6px;
}

.trust-badge-bar {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.trust-badge-bar .sep {
  color: #12ADA8;
  margin: 0 6px;
}

.footer-bottom .legal-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition);
}

.footer-bottom a:hover {
  color: #48E5E0;
  text-shadow: 0 0 8px rgba(72, 229, 224, 0.3);
}

.footer-bottom .sep {
  color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   Blog Listing & Filtering (Section 14 & 20)
   ========================================================================== */
.page-head {
  text-align: center;
  padding: 80px 0 30px;
}

.page-head h1 {
  font-size: 46px;
}

.page-head p {
  color: var(--gray);
  max-width: 600px;
  margin: 16px auto 0;
  font-size: 18px;
}

.filter-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 0 60px;
}

.filter-bar button {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 9.5px 22px;
  border-radius: 50px;
  border: 1.5px solid #CBD5E1;
  background: #FFFFFF;
  font-weight: 600;
  font-size: 13.5px;
  color: #334155;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 45, 82, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-bar button:hover {
  border: 1.5px solid #12ADA8;
  color: #0C8B87;
  background: rgba(18, 173, 168, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(18, 173, 168, 0.15);
}

.filter-bar button.active {
  background: linear-gradient(135deg, #0B2545, #12ADA8);
  color: #FFFFFF;
  border: 1.5px solid #12ADA8;
  box-shadow: 0 6px 18px rgba(18, 173, 168, 0.35);
}

/* ==========================================================================
   Flagship SaaS Product Showcase \u2014 Featured Legal AI & eDiscovery Tools
   Inspired by Relativity, Everlaw, OpenAI, Notion & Vanta Design Systems
   ========================================================================== */
.saas-showcase-section {
  position: relative;
  background: linear-gradient(180deg, #F8FAFC 0%, #F0FDFA 45%, #F8FAFC 100%);
  padding: 100px 0 110px;
  overflow: hidden;
}

.relative-z {
  position: relative;
  z-index: 2;
}

/* Background Animated Orbs & Grid Overlay */
.saas-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

.saas-bg-glow.glow-1 {
  width: 500px;
  height: 500px;
  top: -100px;
  left: -100px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.22), rgba(255, 255, 255, 0));
  animation: floatGlow 12s ease-in-out infinite alternate;
}

.saas-bg-glow.glow-2 {
  width: 600px;
  height: 600px;
  bottom: -150px;
  right: -100px;
  background: radial-gradient(circle, rgba(11, 37, 69, 0.15), rgba(18, 173, 168, 0.08));
  animation: floatGlow 16s ease-in-out infinite alternate-reverse;
}

.saas-bg-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(18, 173, 168, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.45;
  pointer-events: none;
  z-index: 1;
}

@keyframes floatGlow {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(40px, 30px) scale(1.1);
  }
}

/* Header Styling */
.section-head.centered {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}

.badge-pill-glow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-dark);
  background: rgba(18, 173, 168, 0.1);
  padding: 6px 16px;
  border-radius: 30px;
  border: 1px solid rgba(18, 173, 168, 0.28);
  margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.12);
}

.badge-pill-glow .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px var(--teal);
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.6;
  }
}

.title-gradient {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%, var(--teal-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
  line-height: 1.2;
}

.section-lead-desc {
  font-size: 16.5px;
  color: #475569;
  line-height: 1.7;
  margin: 0 auto;
}

/* SaaS Grid & Card Components */
.saas-grid,
.featured-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.tool-card.saas {
  background: var(--white);
  border-radius: 18px;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  padding: 28px 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 20px rgba(11, 37, 69, 0.03);
}

/* Flagship Cards Highlight */
.tool-card.saas.flagship {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDFA 100%);
  border-color: rgba(18, 173, 168, 0.4);
  box-shadow: 0 10px 30px rgba(18, 173, 168, 0.08);
}

.tool-card.saas.flagship::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), #00D2C8, var(--navy));
}

.flagship-ribbon {
  position: absolute;
  top: 14px;
  right: -32px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--teal-dark), var(--navy));
  color: var(--white);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 34px;
  box-shadow: 0 4px 10px rgba(11, 37, 69, 0.15);
  pointer-events: none;
  z-index: 3;
}

.tool-card.saas:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(18, 173, 168, 0.5);
  box-shadow: 0 20px 45px rgba(18, 173, 168, 0.16), 0 6px 16px rgba(11, 37, 69, 0.06);
}

.tool-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.tool-icon-saas {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(18, 173, 168, 0.14), rgba(11, 37, 69, 0.06));
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.tool-card.saas:hover .tool-icon-saas {
  background: linear-gradient(135deg, var(--teal), var(--navy));
  color: var(--white);
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 8px 20px rgba(18, 173, 168, 0.32);
}

/* Category Tags */
.tool-cat-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 14px;
}

.tool-cat-tag.ai-legal {
  color: #0C8B87;
  background: #E6FFFA;
  border: 1px solid rgba(12, 139, 135, 0.25);
}

.tool-cat-tag.privacy {
  color: #7C3AED;
  background: #F3E8FF;
  border: 1px solid rgba(124, 58, 237, 0.22);
}

.tool-cat-tag.ediscovery {
  color: #0284C7;
  background: #E0F2FE;
  border: 1px solid rgba(2, 132, 199, 0.22);
}

.tool-cat-tag.investigation {
  color: #059669;
  background: #D1FAE5;
  border: 1px solid rgba(5, 150, 105, 0.22);
}

.tool-cat-tag.compliance {
  color: #D97706;
  background: #FEF3C7;
  border: 1px solid rgba(217, 119, 6, 0.25);
}

.tool-card-content h3 {
  font-size: 18.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.tool-card.saas:hover .tool-card-content h3 {
  color: var(--teal-dark);
}

.tool-card-content p {
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 18px;
  flex-grow: 1;
}

/* Visual Metric Row */
.tool-metrics-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(241, 245, 249, 0.8);
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 10.5px;
  font-weight: 600;
  color: #334155;
  justify-content: space-between;
  overflow: hidden;
}

.tool-metrics-row span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* CTA Launch Button */
.btn-launch-saas {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 18px;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-launch-saas svg {
  transition: transform 0.25s ease, stroke 0.25s ease;
  stroke: var(--teal);
}

.tool-card.saas:hover .btn-launch-saas,
.btn-launch-saas:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(18, 173, 168, 0.35);
}

.tool-card.saas:hover .btn-launch-saas svg,
.btn-launch-saas:hover svg {
  transform: translateX(5px);
  stroke: var(--white);
}

/* Section-Wide CTA Banner */
.saas-cta-banner {
  position: relative;
  background: linear-gradient(135deg, #0B2545 0%, #123163 60%, #0C8B87 100%);
  border-radius: 20px;
  padding: 44px 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(11, 37, 69, 0.22);
}

.saas-cta-glow-accent {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.4), transparent 70%);
  pointer-events: none;
}

.saas-cta-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A2E8F6;
  margin-bottom: 8px;
}

.saas-cta-content h3 {
  color: var(--white);
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 10px;
}

.saas-cta-content p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  max-width: 620px;
}

.saas-cta-actions {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.btn.lg {
  padding: 16px 32px;
  font-size: 14px;
}

.btn.glow {
  box-shadow: 0 8px 24px rgba(18, 173, 168, 0.4);
}

.btn.outline.white {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}

.btn.outline.white:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--white);
}

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

@media (max-width: 860px) {
  .saas-cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 36px 28px;
  }

  .saas-cta-content p {
    max-width: 100%;
  }

  .saas-cta-actions {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .saas-grid {
    grid-template-columns: 1fr;
  }

  .title-gradient {
    font-size: 32px;
  }
}

/* Tools Directory Grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 0;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 60px;
  margin-bottom: 80px;
  flex-wrap: wrap;
}

.tool-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.tool-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal);
  box-shadow: 0 12px 28px rgba(11, 37, 69, 0.08);
}

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

.tool-cat-badge {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-dark);
  background: #F0FDFA;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(18, 173, 168, 0.25);
}

.tool-card h3 {
  font-size: 19px;
  color: var(--navy);
  margin-bottom: 10px;
}

.tool-card p {
  color: var(--gray);
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 20px;
  flex-grow: 1;
}

.tool-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #F1F5F9;
  padding-top: 16px;
}

.tool-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.tool-link:hover {
  color: var(--teal);
}

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

.post-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  border: 1.5px solid rgba(18, 173, 168, 0.45);
  box-shadow: 0 4px 18px rgba(11, 37, 69, 0.05);
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--teal);
}

.post-thumb {
  height: 210px;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  position: relative;
  overflow: hidden;
}

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

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

.post-body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.post-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
  color: var(--gray);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.post-meta .cat {
  color: var(--teal-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(18, 173, 168, 0.1);
  padding: 3px 10px;
  border-radius: 12px;
}

.post-meta .author {
  color: var(--navy);
  font-weight: 600;
}

.post-card h3 {
  font-size: 20px;
  margin-bottom: 14px;
  line-height: 1.35;
  color: var(--navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card p.summary {
  color: var(--gray);
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 20px;
  flex-grow: 1;
  text-align: left !important;
}

.post-card .rm {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--teal-dark);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.post-card:hover .rm {
  color: var(--teal);
}

.pagination a {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
}

.pagination a:hover {
  border-color: var(--navy);
  background: var(--bg-accent, #f8fafc);
}

.pagination a.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.pagination .pagination-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 4px;
  font-weight: 700;
  color: var(--slate);
}

/* ==========================================================================
   Single Blog Post Article Template (Section 15)
   ========================================================================== */
/* ==========================================================================
   Single Blog Post Article Header Styling (Enhanced Title & Meta Formatting)
   ========================================================================== */
.single-post-header {
  position: relative;
  max-width: 1040px !important;
  margin: 28px auto 36px auto !important;
  padding: 36px 28px 32px 28px !important;
  text-align: center !important;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, rgba(255, 255, 255, 0.5) 100%);
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 4px 20px rgba(11, 37, 69, 0.03);
  overflow: hidden;
}

.single-post-header::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 280px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.09) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.single-post-header > * {
  position: relative;
  z-index: 1;
}

/* Category Pill Badge */
.cat-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #E6FFFA 0%, #CCFBF1 100%) !important;
  color: #0C8B87 !important;
  border: 1px solid rgba(18, 173, 168, 0.35) !important;
  border-radius: 9999px !important;
  padding: 6px 20px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px rgba(18, 173, 168, 0.12) !important;
  margin-bottom: 14px !important;
  transition: all 0.25s ease !important;
}

.cat-tag:hover {
  background: #CCFBF1 !important;
  border-color: #0C8B87 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(18, 173, 168, 0.2) !important;
}

/* Single Post Main Headline Title */
.single-post-header h1 {
  font-size: clamp(1.9rem, 3.2vw + 0.4rem, 2.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.025em !important;
  color: #0F172A !important;
  margin: 14px auto 22px auto !important;
  max-width: 920px !important;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
}

/* Single Post Meta Container */
.single-post-meta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  padding: 10px 28px !important;
  margin-top: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 50px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
  font-size: 0.82rem !important;
  color: #64748B !important;
}

/* Hide raw inline pipe spans '|' */
.single-post-meta > span[style*="CBD5E1"] {
  display: none !important;
}

/* Styling for post meta items */
.single-post-meta > span:not([style*="CBD5E1"]) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #475569 !important;
  font-weight: 500 !important;
}

/* Date Icon (Span 1) */
.single-post-meta > span:not([style*="CBD5E1"]):nth-of-type(1)::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%230C8B87' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
}

/* Author Icon (Span 3) */
.single-post-meta > span:not([style*="CBD5E1"]):nth-of-type(3)::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%230C8B87' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
}

/* Read Time Icon (Span 5) */
.single-post-meta > span:not([style*="CBD5E1"]):nth-of-type(5)::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%230C8B87' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
}

.single-post-meta > span:not([style*="CBD5E1"]):not(:last-child)::after {
  content: "\u2022";
  margin-left: 14px;
  color: #CBD5E1;
  font-weight: 700;
  font-size: 0.9rem;
}

.single-post-meta strong {
  color: #0F172A !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  .single-post-header {
    margin: 16px auto 24px auto !important;
    padding: 24px 16px 20px 16px !important;
    border-radius: 14px !important;
  }
  .single-post-header h1 {
    font-size: 1.65rem !important;
    margin: 10px auto 16px auto !important;
    line-height: 1.3 !important;
  }
  .single-post-meta {
    padding: 8px 18px !important;
    gap: 10px !important;
    border-radius: 12px !important;
    font-size: 0.78rem !important;
  }
  .single-post-meta > span:not([style*="CBD5E1"]):not(:last-child)::after {
    margin-left: 8px !important;
  }
}

.single-post-hero-img {
  max-width: 1040px;
  margin: 0 auto 40px;
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 520px;
  box-shadow: var(--shadow);
}

.single-post-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-content {
  max-width: 940px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.8;
  color: var(--text);
}

.article-lead {
  font-size: 19.5px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--navy);
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--bg-light);
}


.article-content h2 {
  font-size: 26px;
  margin: 40px 0 16px;
  color: var(--navy);
}

.article-content h3 {
  font-size: 20px;
  margin: 28px 0 12px;
  color: var(--navy);
}

.article-content>p {
  margin-bottom: 22px;
  text-align: justify;
}

.article-content ul,
.article-content ol {
  margin: 0 0 24px 24px;
  padding: 0;
  font-size: 17px;
}

.article-content>ul>li,
.article-content>ol>li {
  margin-bottom: 10px;
  text-align: justify;
  line-height: 1.75;
}

/* Left-accented in-article related callout box (Section 15) */
.article-callout {
  margin: 40px 0;
  padding: 24px 28px;
  background: var(--bg-light);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.article-callout .callout-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-dark);
  margin-bottom: 6px;
  display: block;
}

.article-callout a {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
}

.article-callout a:hover {
  color: var(--teal-dark);
}

.article-footer-nav {
  max-width: 940px;
  margin: 60px auto 40px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
}

.back-link:hover {
  color: var(--teal);
}

/* Article Share Box & Brand Color Hover Buttons */
.article-share-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.share-label {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gray);
}

.share-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  border: 1px solid var(--border);
}

.share-btn:hover {
  transform: translateY(-2px);
  color: var(--white) !important;
  box-shadow: 0 4px 12px rgba(11, 37, 69, 0.15);
}

.share-btn.linkedin:hover {
  background: #0A66C2;
  border-color: #0A66C2;
}

.share-btn.twitter:hover {
  background: #000000;
  border-color: #000000;
}

.share-btn.whatsapp:hover {
  background: #25D366;
  border-color: #25D366;
}

.share-btn.facebook:hover {
  background: #1877F2;
  border-color: #1877F2;
}

.share-btn.instagram:hover {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  border-color: #dc2743;
}

.related-posts-section {
  padding: 60px 0 90px;
  background: var(--bg-light);
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   Static Pages (About, Contact, Privacy, Terms, Disclaimer - Section 17)
   ========================================================================== */
.page-content {
  max-width: 840px;
  margin: 0 auto;
  padding: 40px 0 80px;
  font-size: 17px;
  line-height: 1.8;
}

.page-content>p,
.page-content>ul>li,
.page-content>ol>li,
.page-content>div:not(.cards-3):not(.feature-card):not(.contact-layout) p,
.page-content>div:not(.cards-3):not(.feature-card):not(.contact-layout) li {
  text-align: justify;
}

.page-content h2 {
  font-size: 26px;
  margin: 40px 0 16px;
}

.page-content h3 {
  font-size: 20px;
  margin: 28px 0 12px;
}

/* Contact Page Form & Layout */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 50px;
  max-width: 1080px;
  margin: 40px auto 90px;
}

.contact-info-card {
  background: var(--bg-light);
  padding: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.contact-info-card h3 {
  font-size: 22px;
  margin-bottom: 16px;
}

.contact-info-card p {
  color: var(--gray);
  margin-bottom: 24px;
  text-align: left !important;
}

.contact-item {
  margin-bottom: 20px;
}

.contact-item strong {
  display: block;
  color: var(--navy);
  font-size: 14.5px;
  margin-bottom: 4px;
}

.contact-item span {
  color: var(--gray);
  font-size: 15px;
}

.form-box {
  background: var(--white);
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.form-group {
  margin-bottom: 22px;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg-light);
  transition: border-color var(--transition), background var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--white);
}

.privacy-reassurance {
  font-size: 13px;
  color: var(--gray);
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   Responsive Breakpoints (Section 16 - Confirmed at 980px and 640px)
   ========================================================================== */
@media (max-width: 980px) {

  .cards-3,
  .tab-grid,
  .footer-top,
  .post-grid {
    grid-template-columns: 1fr 1fr;
  }

  .audience-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  nav.main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    padding: 24px;
    box-shadow: 0 14px 28px rgba(11, 37, 69, 0.12);
    border-bottom: 1px solid var(--border);
    max-height: 80vh;
    overflow-y: auto;
  }

  nav.main-nav ul {
    flex-direction: column;
    gap: 18px;
  }

  nav.main-nav ul li.has-megamenu,
  nav.main-nav ul li.has-dropdown {
    position: relative;
  }

  .dropdown-menu,
  ul.dropdown-menu {
    position: static !important;
    transform: none !important;
    left: 0 !important;
    min-width: 100% !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 8px 0 8px 12px !important;
  }

  .megamenu-panel {
    position: static;
    box-shadow: none;
    padding: 16px 0;
    max-height: none;
    border-bottom: none;
    border-top: none;
    background: transparent;
  }

  .megamenu-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0;
  }

  .menu-toggle {
    display: block;
  }

  .hero h1 {
    font-size: 46px;
  }

  .single-post-header h1 {
    font-size: 36px;
  }
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 38px;
    /* Confirmed ~40px mobile per Section 3 */
  }

  .cards-3,
  .tab-grid,
  .audience-grid,
  .post-grid,
  .footer-top {
    grid-template-columns: 1fr;
  }

  .section {
    padding: var(--section-pad-mobile) 0;
  }

  .trust-logos {
    gap: 20px;
  }

  .trust-logos span:not(:last-child)::after {
    display: none;
  }

  .single-post-header h1 {
    font-size: 30px;
  }

  .form-box,
  .contact-info-card {
    padding: 24px;
  }
}

/* ==========================================================================
   SaaS & LegalTech Hero Section \u2014 Modern Two-Column Layout & Visual Mockup
   ========================================================================== */

/* ==========================================================================
   Enterprise LegalTech & SaaS Hero Section \u2014 Final Optimized System
   Colors: Primary Navy #0F2D52, Primary Teal #1FB5B3, Secondary Teal #4FD1C5, Light #F7FAFC
   ========================================================================== */

/* ==========================================================================
   Enterprise LegalTech Hero Section \u2014 Final UX & Visual Hierarchy Balance
   Colors: Primary Navy #0F2D52, Primary Teal #1FB5B3, Secondary Teal #4FD1C5, Light #F7FAFC
   ========================================================================== */

.hero-enterprise-section {
  position: relative;
  /* Dark slate gradient matching v-product-hero */
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  padding: 32px 0 40px;
  overflow: hidden;
  color: #FFFFFF;
}

/* Ecosystem Dashboard Specific Tags & Tool Metrics */
.top-tool-card {
  padding: 12px 14px;
}

.icon-cyan-glow {
  background: rgba(34, 211, 238, 0.2);
  color: #22D3EE;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid rgba(34, 211, 238, 0.35);
}

.fill-cyan {
  background: linear-gradient(90deg, #22D3EE, #1FB5B3);
}

.tool-status-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 11.5px;
}

.card-metrics-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.metric-status-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  width: fit-content;
}

.tag-warning {
  background: rgba(245, 158, 11, 0.18);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.tag-info {
  background: rgba(59, 130, 246, 0.18);
  color: #60A5FA;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.tag-teal {
  background: rgba(31, 181, 179, 0.18);
  color: #4FD1C5;
  border: 1px solid rgba(31, 181, 179, 0.3);
}

.tag-purple {
  background: rgba(168, 85, 247, 0.18);
  color: #C084FC;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.tag-amber {
  background: rgba(245, 158, 11, 0.18);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.tag-blue {
  background: rgba(59, 130, 246, 0.18);
  color: #60A5FA;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.tag-red {
  background: rgba(239, 68, 68, 0.18);
  color: #F87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.metric-value-text {
  font-size: 11px;
  font-weight: 600;
  color: #E2E8F0;
}

.mini-progress-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10.5px;
  color: #CBD5E1;
}

.mini-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.mini-fill {
  height: 100%;
  background: #1FB5B3;
  border-radius: 2px;
}

.small-pii-panel {
  padding: 8px 12px;
  margin-top: 6px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.pii-panel-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #F87171;
  margin-top: 4px;
}

.badge-red-pulse {
  font-size: 10px;
  background: rgba(239, 68, 68, 0.2);
  color: #FCA5A5;
  padding: 2px 6px;
  border-radius: 8px;
}

/* Background Atmosphere & Mesh */
.hero-ent-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.35;
  z-index: 1;
}

.glow-teal-primary {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(31, 181, 179, 0.35) 0%, rgba(15, 45, 82, 0) 70%);
  top: -90px;
  right: -30px;
  animation: heroPulse 8s ease-in-out infinite alternate;
}

.glow-teal-secondary {
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(79, 209, 197, 0.22) 0%, rgba(15, 45, 82, 0) 70%);
  bottom: -130px;
  left: -90px;
}

.hero-ent-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 1;
}

.hero-enterprise-section .container {
  position: relative;
  z-index: 2;
}

/* Two-Column Enterprise Grid \u2014 Rebalanced Optical Alignment & Ratio */
.hero-ent-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: center;
}

/* Left Column Styling \u2014 Visually Balanced & Center-Aligned Product Hero Layout */
.hero-ent-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  align-self: center;
  max-width: 640px;
  width: 100%;
}

.hero-ent-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: linear-gradient(135deg, rgba(31, 181, 179, 0.18) 0%, rgba(15, 45, 82, 0.5) 100%);
  border: 1px solid rgba(79, 209, 197, 0.4);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #4FD1C5;
  margin-bottom: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(31, 181, 179, 0.15);
  transition: all 0.3s ease;
}

.hero-ent-badge:hover {
  border-color: #1FB5B3;
  box-shadow: 0 4px 20px rgba(31, 181, 179, 0.3);
  transform: translateY(-1px);
}

.badge-icon {
  font-size: 13px;
  display: inline-block;
  line-height: 1;
}

.hero-ent-title {
  font-size: clamp(32px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  color: #FFFFFF;
  margin-bottom: 18px;
  letter-spacing: -0.025em;
  text-align: center;
  max-width: 100%;
}

.hero-ent-accent {
  color: #1FB5B3;
  background: linear-gradient(135deg, #22D3EE 0%, #1FB5B3 50%, #4FD1C5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  filter: drop-shadow(0 2px 8px rgba(31, 181, 179, 0.2));
}

.hero-ent-subtitle {
  font-size: 15.5px;
  line-height: 1.68;
  color: #CBD5E1;
  margin-bottom: 26px;
  max-width: 100%;
  text-align: center;
}

.hero-value-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 30px;
  width: 100%;
  max-width: 100%;
}

.hero-val-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 35, 64, 0.7);
  color: #4FD1C5;
  border: 1px solid rgba(31, 181, 179, 0.32);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  width: 100%;
  box-sizing: border-box;
}

.hero-val-badge svg {
  color: #1FB5B3;
  transition: transform 0.25s ease, color 0.25s ease;
  flex-shrink: 0;
}

.hero-val-badge:hover {
  background: rgba(31, 181, 179, 0.22);
  border-color: #4FD1C5;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(31, 181, 179, 0.35);
}

.hero-val-badge:hover svg {
  color: #FFFFFF;
  transform: scale(1.15);
}

/* CTAs & Trust Block */
.hero-ent-cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  width: 100%;
}

.hero-ent-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.btn-ent-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: linear-gradient(135deg, #1FB5B3 0%, #179391 100%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 8px 22px rgba(31, 181, 179, 0.4);
  transition: all 0.3s ease;
}

.btn-ent-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(31, 181, 179, 0.55);
  color: #FFFFFF;
}

.btn-ent-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.08);
  color: #F1F5F9;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.btn-ent-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.42);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.hero-trust-statement-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}

.trust-statement-text {
  font-size: 12.5px;
  color: #CBD5E1;
  text-align: center;
}

/* Trusted Topics \u2014 Content Pillars Navigation Showcase */
.hero-integrated-topics {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding-top: 24px;
  border-top: 1px solid rgba(31, 181, 179, 0.25);
  position: relative;
  text-align: center;
}

.hero-integrated-topics::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #4FD1C5 50%, transparent 100%);
}

.topics-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #4FD1C5;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.topics-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22D3EE;
  box-shadow: 0 0 8px #22D3EE;
}

.topics-cards-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.topics-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  width: 100%;
}

.topic-pillar-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  background: rgba(15, 34, 64, 0.75);
  border: 1px solid rgba(31, 181, 179, 0.3);
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: #E2E8F0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.topic-pillar-card:hover {
  background: rgba(31, 181, 179, 0.24);
  border-color: #4FD1C5;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(31, 181, 179, 0.35);
}

.topic-icon-wrap {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(31, 181, 179, 0.22);
  border: 1px solid rgba(31, 181, 179, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.topic-pillar-card:hover .topic-icon-wrap {
  background: rgba(31, 181, 179, 0.45);
  border-color: #4FD1C5;
}

.pillar-icon {
  color: #4FD1C5;
  flex-shrink: 0;
}

.topic-pillar-card:hover .pillar-icon {
  color: #FFFFFF;
}

.cat-count-badge {
  font-size: 10px;
  font-weight: 700;
  color: #4FD1C5;
  background: rgba(31, 181, 179, 0.22);
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid rgba(31, 181, 179, 0.3);
  margin-left: 2px;
}

.topic-pillar-card:hover .cat-count-badge {
  color: #FFFFFF;
  background: rgba(31, 181, 179, 0.4);
  border-color: #4FD1C5;
}

/* Right Column Showcase Visual Graphic Frame (Clean White & Teal Enterprise Theme) */
.hero-ent-visual {
  position: relative;
  perspective: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
  width: 100%;
  height: 100%;
  margin: auto 0;
}

.dashboard-mockup-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-ent-visual:hover .dashboard-mockup-wrapper {
  transform: translateY(-6px) rotateX(1.5deg) rotateY(-1.5deg);
}

.app-ui-mockup-frame {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(11, 37, 69, 0.28), 0 0 30px rgba(18, 173, 168, 0.15);
  color: #0F172A;
  font-family: 'Inter', sans-serif;
  text-align: left;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light Sheen Shimmer Overlay on Frame Hover */
.app-ui-mockup-frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

.hero-ent-visual:hover .app-ui-mockup-frame {
  border-color: #12ADA8;
  box-shadow: 0 28px 65px rgba(11, 37, 69, 0.42), 0 0 45px rgba(18, 173, 168, 0.35);
}

.hero-ent-visual:hover .app-ui-mockup-frame::after {
  left: 150%;
}

.app-ui-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
}

.app-brand-logo {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.app-brand-logo img {
  height: 32px;
  width: auto;
  max-width: 300px;
  display: block;
  transition: transform 0.3s ease;
}

.hero-ent-visual:hover .app-brand-logo img {
  transform: scale(1.02);
}

.app-ui-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.airgap-status-pill {
  font-size: 10.5px;
  font-weight: 700;
  color: #047857;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.08);
  transition: all 0.25s ease;
}

.airgap-status-pill:hover {
  background: #D1FAE5;
  border-color: #6EE7B7;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.status-pulse-dot {
  width: 6px;
  height: 6px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
  animation: pulseGreenDot 2s infinite;
}

@keyframes pulseGreenDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.mockup-module-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  overflow-x: auto;
}

.module-tab-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.module-tab-item:hover {
  color: #0C8B87;
  background: rgba(18, 173, 168, 0.14);
  border-color: #12ADA8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(18, 173, 168, 0.15);
}

.module-tab-item.active {
  color: #0C8B87;
  background: rgba(18, 173, 168, 0.12);
  border-color: #12ADA8;
  box-shadow: 0 2px 8px rgba(18, 173, 168, 0.15);
}

.tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dot-hold { background: #12ADA8; }
.dot-analyzer { background: #3B82F6; }
.dot-review { background: #8B5CF6; }
.dot-trial { background: #F59E0B; }

.app-ui-main {
  padding: 16px;
  background: #F1F5F9;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Featured Hero Product Card */
.preview-hero-card {
  background: #FFFFFF;
  border: 1.5px solid #12ADA8;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.preview-hero-card:hover {
  border-color: #0C8B87;
  box-shadow: 0 8px 24px rgba(18, 173, 168, 0.2);
  transform: translateY(-3px);
}

.preview-hero-card:hover .p-bar-fill {
  box-shadow: 0 0 10px rgba(18, 173, 168, 0.6);
}

.p-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.p-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.p-card-icon.icon-teal {
  background: rgba(18, 173, 168, 0.12);
  color: #0C8B87;
}

.p-card-icon.icon-blue {
  background: rgba(59, 130, 246, 0.12);
  color: #2563EB;
}

.p-card-icon.icon-purple {
  background: rgba(139, 92, 246, 0.12);
  color: #7C3AED;
}

.p-card-icon.icon-amber {
  background: rgba(245, 158, 11, 0.12);
  color: #D97706;
}

.p-card-titles {
  flex-grow: 1;
}

.p-title {
  font-size: 13px;
  font-weight: 800;
  color: #0B2545;
  margin: 0;
  line-height: 1.2;
}

.p-sub {
  font-size: 10px;
  color: #64748B;
}

.p-badge-defensible {
  font-size: 9.5px;
  font-weight: 700;
  color: #0C8B87;
  background: rgba(18, 173, 168, 0.12);
  border: 1px solid rgba(18, 173, 168, 0.3);
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.p-card-body {
  background: #F8FAFC;
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid #E2E8F0;
}

.p-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 4px;
}

.p-stat-val {
  color: #0C8B87;
}

.p-bar-track {
  height: 5px;
  background: #E2E8F0;
  border-radius: 3px;
  overflow: hidden;
}

.p-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #12ADA8, #0C8B87);
  border-radius: 3px;
  transition: box-shadow 0.3s ease;
}

/* 2-Column Performance Subgrid */
.preview-subgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.preview-mini-card {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.preview-mini-card:hover {
  border-color: #12ADA8;
  box-shadow: 0 8px 20px rgba(18, 173, 168, 0.18);
  transform: translateY(-3px);
}

.mini-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-card-title {
  font-size: 11px;
  font-weight: 800;
  color: #0B2545;
}

.mini-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mini-tag {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  width: fit-content;
}

.mini-tag.tag-blue {
  background: #EFF6FF;
  color: #2563EB;
  border: 1px solid #BFDBFE;
}

.mini-tag.tag-purple {
  background: #F3E8FF;
  color: #7C3AED;
  border: 1px solid #DDD6FE;
}

.mini-tag.tag-amber {
  background: #FEF3C7;
  color: #D97706;
  border: 1px solid #FDE68A;
}

.mini-tag.tag-teal {
  background: rgba(18, 173, 168, 0.12);
  color: #0C8B87;
  border: 1px solid rgba(18, 173, 168, 0.3);
}

.mini-meta {
  font-size: 9px;
  color: #64748B;
  font-weight: 500;
}

/* Bottom Security Assurance Banner */
.preview-security-banner {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-left: 4px solid #12ADA8;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9.5px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.preview-security-banner:hover {
  border-left-color: #0C8B87;
  border-color: #12ADA8;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.14);
  transform: translateY(-2px);
}

.sec-banner-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #0F172A;
}

.sec-shield-tag {
  font-weight: 700;
  color: #059669;
  background: #D1FAE5;
  border: 1px solid #A7F3D0;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 9px;
}mns: 1fr;
  }
}

.mockup-ent-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.glass-ent-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.glass-ent-card:hover {
  border-color: rgba(31, 181, 179, 0.4);
  background: rgba(255, 255, 255, 0.07);
}

.ai-copilot-card {
  background: linear-gradient(135deg, rgba(31, 181, 179, 0.15) 0%, rgba(15, 45, 82, 0.5) 100%);
  border-color: rgba(31, 181, 179, 0.3);
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .hero-ent-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero-ent-title {
    font-size: clamp(28px, 4vw, 34px);
    max-width: 100%;
  }

  .hero-ent-subtitle {
    max-width: 600px;
  }

  .hero-ent-content {
    text-align: center;
    align-items: center;
    max-width: 100%;
  }

  .hero-value-badges,
  .hero-ent-cta-group,
  .hero-trust-statement-bar,
  .seo-ent-pills,
  .hero-integrated-topics {
    justify-content: center;
    align-items: center;
  }

  .topics-cards-showcase {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .hero-enterprise-section {
    padding: 24px 0 24px;
  }

  .hero-ent-title {
    font-size: 26px;
  }

  .hero-ent-subtitle {
    font-size: 14.5px;
    margin-bottom: 24px;
  }

  .hero-value-badges {
    margin-bottom: 24px;
    gap: 8px;
  }

  .hero-val-badge {
    padding: 7px 14px;
    font-size: 12.5px;
  }
}


.glass-card:hover {
  border-color: rgba(18, 173, 168, 0.4);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Floating Animations */
.float-anim-1 {
  animation: heroFloat 6s ease-in-out infinite;
}

.float-anim-2 {
  animation: heroFloat 7s ease-in-out infinite 1s;
}

.float-anim-3 {
  animation: heroFloat 8s ease-in-out infinite 2s;
}

@keyframes heroFloat {

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

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

@keyframes heroPulse {
  0% {
    transform: scale(1);
    opacity: 0.35;
  }

  100% {
    transform: scale(1.1);
    opacity: 0.55;
  }
}

@keyframes pulseDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(1.3);
  }
}

/* Card Specific Interiors */
.ai-assistant-card {
  background: linear-gradient(135deg, rgba(18, 173, 168, 0.12) 0%, rgba(11, 37, 69, 0.4) 100%);
  border-color: rgba(18, 173, 168, 0.3);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.card-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-sparkle-icon {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #12ADA8 0%, #00D2FF 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

.card-title {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

.card-sub {
  font-size: 10.5px;
  color: #94A3B8;
}

.pill-accuracy {
  font-size: 10.5px;
  font-weight: 700;
  color: #A2E8F6;
  background: rgba(18, 173, 168, 0.2);
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid rgba(18, 173, 168, 0.3);
}

.card-prompt-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.prompt-query {
  font-size: 11.5px;
  color: #E2E8F0;
  font-family: sans-serif;
  font-style: italic;
}

.progress-bar-container {
  height: 5px;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 82%;
  background: linear-gradient(90deg, #12ADA8, #00D2FF);
  border-radius: 10px;
  animation: progressPulse 3s ease-in-out infinite alternate;
}

@keyframes progressPulse {
  0% {
    width: 75%;
  }

  100% {
    width: 92%;
  }
}

.prompt-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #94A3B8;
}

.highlight-stat {
  color: #F87171;
  font-weight: 700;
}

/* Subgrid Layout inside Mockup */
.mockup-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.card-icon-small {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-blue {
  background: rgba(59, 130, 246, 0.2);
  color: #60A5FA;
}

.icon-teal {
  background: rgba(18, 173, 168, 0.2);
  color: #2DD4BF;
}

.icon-purple {
  background: rgba(168, 85, 247, 0.2);
  color: #C084FC;
}

.icon-green {
  background: rgba(34, 197, 94, 0.2);
  color: #4ADE80;
}

.card-mini-title {
  font-size: 12px;
  font-weight: 700;
  color: #E2E8F0;
}

.analysis-stats {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.stat-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

.badge-warning {
  background: rgba(239, 68, 68, 0.2);
  color: #FCA5A5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-success {
  background: rgba(34, 197, 94, 0.2);
  color: #86EFAC;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.clause-match-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.match-info {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #94A3B8;
}

.bar-bg {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: #12ADA8;
  border-radius: 4px;
}

/* Timeline Cards */
.timeline-nodes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: #CBD5E1;
}

.t-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.t-blue {
  background: #60A5FA;
  box-shadow: 0 0 6px #60A5FA;
}

.t-teal {
  background: #2DD4BF;
  box-shadow: 0 0 6px #2DD4BF;
}

.t-time {
  font-size: 9.5px;
  color: #64748B;
  font-family: monospace;
}

.t-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bottom Row */
.mockup-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.mini-graph-visual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-top: 6px;
}

.graph-node {
  font-size: 9.5px;
  font-weight: 600;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #E2E8F0;
  z-index: 2;
}

.node-alert {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #FECACA;
}

.graph-line {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(18, 173, 168, 0.5));
  flex-grow: 1;
}

.compliance-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #CBD5E1;
}

.status-light-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 6px #4ADE80;
}

.compliance-score {
  font-size: 12px;
  font-weight: 700;
  color: #4ADE80;
}

/* Social Proof Band Styling */
.social-proof-saas-band {
  background: #061120;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px 0;
}

.social-proof-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.proof-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #12ADA8;
  white-space: nowrap;
}

.proof-topics-list {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.proof-topic-chip {
  padding: 7px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #E2E8F0;
  transition: all 0.25s ease;
}

.proof-topic-chip:hover {
  background: rgba(18, 173, 168, 0.15);
  border-color: rgba(18, 173, 168, 0.4);
  color: #A2E8F6;
  transform: translateY(-2px);
}

/* Responsive Media Queries for SaaS Hero */
@media (max-width: 1024px) {
  .hero-saas-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-title {
    font-size: 40px;
  }

  .hero-content {
    text-align: center;
    align-items: center;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-trust-signals {
    justify-content: center;
  }

  .hero-seo-block {
    align-items: center;
  }

  .seo-links-wrap {
    justify-content: center;
  }
}

/* ==========================================================================
   Section 6: Core LegalTech Category Hubs (3-Card Showcase Grid)
   ========================================================================== */
.category-hubs-section {
  background: var(--white);
  padding: 90px 0;
}

.cards-3.category-hubs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 10px;
}

.feature-card.hub-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(11, 37, 69, 0.04);
  position: relative;
  overflow: hidden;
}

.feature-card.hub-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal);
  box-shadow: 0 16px 36px rgba(11, 37, 69, 0.1), 0 0 20px rgba(18, 173, 168, 0.08);
}

.hub-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hub-card .icon-container {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(18, 173, 168, 0.08);
  border: 1px solid rgba(18, 173, 168, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--teal-dark);
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.feature-card.hub-card:hover .icon-container {
  background: var(--teal);
  color: #FFFFFF;
  border-color: var(--teal);
  transform: scale(1.05);
}

.hub-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.feature-card.hub-card:hover h3 {
  color: var(--teal-dark);
}

.hub-card p {
  color: #475569;
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 24px;
  margin-top: 0;
}

.card-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 0.25s ease;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
  width: 100%;
}

.feature-card.hub-card:hover .card-cta-link {
  color: var(--teal);
  border-top-color: rgba(18, 173, 168, 0.25);
}

.card-cta-link svg {
  transition: transform 0.25s ease;
}

.feature-card.hub-card:hover .card-cta-link svg {
  transform: translateX(4px);
}

@media (max-width: 992px) {
  .cards-3.category-hubs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .cards-3.category-hubs-grid {
    grid-template-columns: 1fr;
  }

  .feature-card.hub-card {
    padding: 26px 22px;
  }
}

@media (max-width: 640px) {
  .hero-saas-section {
    padding: 70px 0 60px;
  }

  .hero-title {
    font-size: 32px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .hero-trust-signals {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mockup-subgrid,
  .mockup-bottom-row {
    grid-template-columns: 1fr;
  }

  .social-proof-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Section 7: What We Write About \u2014 Enterprise LegalTech Topic Hub
   ========================================================================== */
.topic-directory-section {
  background: #F8FAFC !important;
  padding: 95px 0;
  border-top: 1px solid #E6E9EF;
  border-bottom: 1px solid #E6E9EF;
}

/* Tabs Navigation Styling */
.saas-tabs-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.saas-tabs-nav .tab-btn {
  padding: 12px 24px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(15, 45, 82, 0.04);
}

.saas-tabs-nav .tab-btn:hover {
  border-color: #12ADA8;
  color: #0C8B87;
  transform: translateY(-2px);
}

.saas-tabs-nav .tab-btn.active {
  background: #0B2545;
  border-color: #0B2545;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(11, 37, 69, 0.2);
}

/* Tab Panel Hidden & Active Display Controls - Guaranteed 0 Empty Gap */
.topic-directory-section .tab-panel {
  display: none !important;
  opacity: 0;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  transition: opacity 0.25s ease;
}

.topic-directory-section .tab-panel.active {
  display: grid !important;
  opacity: 1;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

/* 3-Column Desktop Grid, 2-Column Tablet, 1-Column Mobile */
.saas-pillar-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Individual Content Card Item */
.tab-card-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(15, 45, 82, 0.04);
  position: relative;
  height: 100%;
}

.card-item-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card-item-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 16px;
}

.card-item-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.card-accent-pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 12px;
}

/* Category Accent Styles */
/* 1. eDiscovery Workflows (Teal Accent) */
.tab-card-item.ediscovery .card-item-icon {
  background: rgba(18, 173, 168, 0.08);
  border: 1px solid rgba(18, 173, 168, 0.25);
  color: #0C8B87;
}

.card-accent-pill.ediscovery {
  background: rgba(18, 173, 168, 0.12);
  color: #0C8B87;
}

.tab-card-item.ediscovery:hover {
  transform: translateY(-6px);
  border-color: #12ADA8;
  box-shadow: 0 16px 36px rgba(15, 45, 82, 0.09), 0 0 20px rgba(18, 173, 168, 0.12);
}

.tab-card-item.ediscovery:hover .card-item-icon {
  background: #12ADA8;
  color: #FFFFFF;
  border-color: #12ADA8;
  transform: scale(1.06);
}

/* 2. Legal AI & Automation (Teal + Purple Accent) */
.tab-card-item.ai .card-item-icon {
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: #7C3AED;
}

.card-accent-pill.ai {
  background: #F3E8FF;
  color: #7C3AED;
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.tab-card-item.ai:hover {
  transform: translateY(-6px);
  border-color: #8B5CF6;
  box-shadow: 0 16px 36px rgba(124, 58, 237, 0.12), 0 0 20px rgba(139, 92, 246, 0.12);
}

.tab-card-item.ai:hover .card-item-icon {
  background: #7C3AED;
  color: #FFFFFF;
  border-color: #7C3AED;
  transform: scale(1.06);
}

/* 3. Data Governance & Compliance (Green Accent) */
.tab-card-item.compliance .card-item-icon {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #059669;
}

.card-accent-pill.compliance {
  background: #D1FAE5;
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.tab-card-item.compliance:hover {
  transform: translateY(-6px);
  border-color: #10B981;
  box-shadow: 0 16px 36px rgba(16, 185, 129, 0.12), 0 0 20px rgba(16, 185, 129, 0.12);
}

.tab-card-item.compliance:hover .card-item-icon {
  background: #059669;
  color: #FFFFFF;
  border-color: #059669;
  transform: scale(1.06);
}

/* 4. Investigations & Case Strategy (Amber Accent) */
.tab-card-item.investigations .card-item-icon {
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.25);
  color: #D97706;
}

.card-accent-pill.investigations {
  background: #FEF3C7;
  color: #D97706;
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.tab-card-item.investigations:hover {
  transform: translateY(-6px);
  border-color: #F59E0B;
  box-shadow: 0 16px 36px rgba(217, 119, 6, 0.12), 0 0 20px rgba(245, 158, 11, 0.12);
}

.tab-card-item.investigations:hover .card-item-icon {
  background: #D97706;
  color: #FFFFFF;
  border-color: #D97706;
  transform: scale(1.06);
}

.tab-card-item h4 {
  font-size: 17.5px;
  font-weight: 700;
  color: #0B2545;
  margin-bottom: 8px;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.tab-card-item:hover h4 {
  color: #0C8B87;
}

.tab-card-item p {
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 22px;
  margin-top: 0;
}

.tab-item-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #0C8B87;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: all 0.25s ease;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
  width: 100%;
  margin-top: auto;
}

.tab-card-item:hover .tab-item-link {
  color: #12ADA8;
  border-top-color: rgba(18, 173, 168, 0.25);
}

.tab-item-link svg {
  transition: transform 0.25s ease;
}

.tab-card-item:hover .tab-item-link svg {
  transform: translateX(4px);
}

@media (max-width: 992px) {
  .saas-pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .saas-pillar-grid {
    grid-template-columns: 1fr;
  }

  .tab-card-item {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   Section 8: Written For \u2014 Audience Cards
   ========================================================================== */
.audience-section {
  padding: 80px 0;
  background: #F8FAFC !important;
  border-top: 1px solid #E6E9EF;
  border-bottom: 1px solid #E6E9EF;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.audience-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 45, 82, 0.03);
  height: 100%;
}

.audience-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5px;
  background: linear-gradient(90deg, #0B2545, #12ADA8);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.audience-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}

.audience-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(18, 173, 168, 0.08);
  border: 1px solid rgba(18, 173, 168, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0C8B87;
  transition: all 0.25s ease;
}

.audience-pill {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 10px;
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #CBD5E1;
}

.audience-txt h4 {
  font-size: 16px;
  font-weight: 800;
  color: #0B2545;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
}

.audience-txt p {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.audience-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0C8B87;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
  transition: all 0.25s ease;
}

.audience-footer svg {
  transition: transform 0.25s ease;
}

.audience-card:hover {
  transform: translateY(-6px);
  background: #FFFFFF;
  border-color: #12ADA8;
  box-shadow: 0 16px 36px rgba(15, 45, 82, 0.08), 0 0 16px rgba(18, 173, 168, 0.1);
}

.audience-card:hover::before {
  opacity: 1;
}

.audience-card:hover .audience-icon {
  background: #12ADA8;
  color: #FFFFFF;
  border-color: #12ADA8;
  transform: scale(1.05);
}

.audience-card:hover h4 {
  color: #0C8B87;
}

.audience-card:hover .audience-footer {
  color: #12ADA8;
  border-top-color: rgba(18, 173, 168, 0.25);
}

.audience-card:hover .audience-footer svg {
  transform: translateX(4px);
}

@media (max-width: 992px) {
  .audience-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .audience-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Section 9: Expert Quote \u2014 Reduced Height Testimonial Layout
   ========================================================================== */
.expert-quote-section {
  background: #FFFFFF !important;
  padding: 55px 0;
}

.expert-quote-card {
  background: radial-gradient(circle at 50% 0%, rgba(18, 173, 168, 0.06), #FFFFFF 70%);
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 42px 36px;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 24px rgba(15, 45, 82, 0.04);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.expert-quote-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 45, 82, 0.08);
  border-color: rgba(18, 173, 168, 0.35);
}

.quote-watermark {
  color: rgba(18, 173, 168, 0.25);
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

.expert-quote-text {
  font-family: 'Poppins', sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.65;
  color: #0F172A;
  max-width: 720px;
  margin: 14px auto 28px;
  font-style: italic;
}

.expert-quote-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.author-avatar-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0B2545, #12ADA8);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(11, 37, 69, 0.15);
}

.author-details {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.author-name {
  font-size: 15.5px;
  font-weight: 700;
  color: #0B2545;
}

.author-role {
  font-size: 13px;
  color: #64748B;
  font-weight: 500;
}

.expert-quote-accent-bar {
  height: 3px;
  width: 80px;
  background: linear-gradient(90deg, #0B2545, #12ADA8, #0B2545);
  border-radius: 3px;
  margin: 24px auto 0;
}

@media (max-width: 640px) {
  .expert-quote-card {
    padding: 30px 18px;
  }

  .expert-quote-text {
    font-size: 16.5px;
  }
}

/* ==========================================================================
   Section 11: Enterprise Statistics Counter Banner
   ========================================================================== */
.stats-section {
  padding: 65px 0 50px;
  background: #F8FAFC !important;
}

.saas-stats-banner {
  background: linear-gradient(135deg, #0B2545 0%, #0F172A 60%, #0F3A4A 100%);
  border-radius: 16px;
  padding: 34px 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(15, 45, 82, 0.12);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.saas-stats-banner:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 44px rgba(15, 45, 82, 0.18), 0 0 20px rgba(20, 184, 166, 0.15);
}

.stats-bg-glow {
  position: absolute;
  top: -50%;
  right: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.22) 0%, rgba(20, 184, 166, 0) 70%);
  pointer-events: none;
  border-radius: 50%;
}

.saas-stats-banner .stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  z-index: 1;
}

.saas-stats-banner .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.saas-stats-banner .stat-icon {
  color: #14B8A6;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}

.saas-stats-banner .stat:hover .stat-icon {
  transform: translateY(-2px) scale(1.1);
  color: #2DD4BF;
}

.saas-stats-banner .num {
  font-family: 'Poppins', sans-serif;
  font-size: 38px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.saas-stats-banner .lbl {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
}

.stat-divider {
  width: 1px;
  height: 52px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .saas-stats-banner .stats {
    flex-direction: column;
    gap: 28px;
  }

  .stat-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  }
}

/* ==========================================================================
   Section 12: Newsletter Intro / Closing Banner
   ========================================================================== */
.newsletter-intro-section {
  padding: 50px 0 75px;
  background: #F8FAFC !important;
}

.newsletter-intro-card {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  animation: fadeInUp 0.4s ease forwards;
}

.newsletter-accent-line {
  height: 3.5px;
  width: 48px;
  background: #14B8A6;
  border-radius: 2px;
  margin: 0 auto 18px;
}

.newsletter-intro-card .closing-title {
  font-size: 28px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.35;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.newsletter-intro-card .closing-subtitle {
  font-size: 16px;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 640px) {
  .newsletter-intro-card .closing-title {
    font-size: 22px;
  }

  .newsletter-intro-card .closing-subtitle {
    font-size: 14.5px;
  }
}

/* ==========================================================================
   Blog Category / Archive Page Redesign (Content-First Knowledge Hub)
   ========================================================================== */
.blog-archive-page,
.tools-archive-page,
.single-post-page {
  background: #F8FAFC;
}

.archive-articles-section,
.tools-archive-section {
  padding: 60px 0 80px !important;
  background: linear-gradient(160deg, #f0f4ff 0%, #f8fafc 40%, #eef8f7 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.archive-articles-section::before,
.tools-archive-section::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.archive-articles-section::after,
.tools-archive-section::after {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(10, 78, 107, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.tools-archive-section .tools-grid,
.archive-articles-section .post-grid {
  margin-top: 0 !important;
  margin-bottom: 32px !important;
  position: relative !important;
  z-index: 2 !important;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Veridex-Style Hero Section across all Archive & Category Pages */
.compact-archive-hero {
  position: relative !important;
  padding: 75px 0 65px !important;
  background: linear-gradient(135deg, #0B2545 0%, #06152B 50%, #0A4E6B 100%) !important;
  color: #FFFFFF !important;
  text-align: center !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.compact-archive-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.compact-archive-hero .container {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.compact-archive-hero .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(18, 173, 168, 0.16) !important;
  border: 1px solid rgba(18, 173, 168, 0.4) !important;
  color: #A2E8F6 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  padding: 6px 18px !important;
  border-radius: 50px !important;
  margin: 0 auto 20px !important;
  backdrop-filter: blur(6px) !important;
}

.compact-archive-hero .archive-title {
  font-size: clamp(32px, 4.2vw, 50px) !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  margin: 0 auto 16px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.18 !important;
  text-align: center !important;
  max-width: 960px !important;
}

.compact-archive-hero .archive-description {
  font-size: 17.5px !important;
  color: #CBD5E1 !important;
  line-height: 1.65 !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  font-family: 'Inter', sans-serif !important;
  text-align: center !important;
}

/* Filter Navigation Bar & Scroll Controls Sticky below header or top: 0 in compact mode */
.archive-filter-nav {
  padding: 12px 0 !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0;
  position: sticky !important;
  top: var(--header-height, 66px) !important;
  z-index: 999 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  margin-bottom: 32px !important;
  transition: top 0.2s ease, box-shadow 0.2s ease;
}


.filter-nav-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

.filter-scroll-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-behavior: smooth;
  padding: 8px 16px !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-grow: 1;
  max-width: 100%;
}

.filter-scroll-wrapper .filter-pill:first-child {
  margin-left: auto !important;
}

.filter-scroll-wrapper .filter-pill:last-child {
  margin-right: auto !important;
}

@media (max-width: 768px) {
  .filter-scroll-wrapper {
    justify-content: flex-start !important;
    padding: 8px 32px 8px 16px !important;
  }
  .filter-scroll-wrapper .filter-pill:first-child {
    margin-left: 0 !important;
  }
  .filter-scroll-wrapper .filter-pill:last-child {
    margin-right: 0 !important;
  }
}

.filter-scroll-wrapper::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  flex-shrink: 0;
}

.filter-scroll-wrapper::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar Chrome/Safari */
}

/* Left & Right Scroll Arrow Controls */
.scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  color: #0F172A;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 45, 82, 0.12);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  z-index: 10;
  outline: none;
  line-height: 1;
}

.scroll-arrow:hover {
  background: #12ADA8;
  border-color: #12ADA8;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.35);
  transform: scale(1.08);
}

.scroll-arrow.scroll-left {
  margin-right: 12px !important;
  margin-left: 0 !important;
}

.scroll-arrow.scroll-right {
  margin-left: 18px !important;
  margin-right: 0 !important;
}

.hero-category-chips .filter-pill,
.filter-scroll-wrapper .filter-pill,
.archive-filter-nav .filter-pill,
.filter-pill {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em !important;
  padding: 8px 20px !important;
  border-radius: 50px !important;
  border: 1.5px solid #CBD5E1 !important;
  background: #FFFFFF !important;
  color: #334155 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  outline: none !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 6px rgba(15, 45, 82, 0.04) !important;
}

.hero-category-chips .filter-pill:hover,
.filter-scroll-wrapper .filter-pill:hover,
.archive-filter-nav .filter-pill:hover,
.filter-pill:hover {
  border: 1.5px solid #12ADA8 !important;
  color: #0C8B87 !important;
  background: rgba(18, 173, 168, 0.05) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.18) !important;
}

.hero-category-chips .filter-pill.active,
.filter-scroll-wrapper .filter-pill.active,
.archive-filter-nav .filter-pill.active,
.filter-pill.active,
.filter-pill[aria-current="page"] {
  background: linear-gradient(135deg, #0B2545 0%, #12ADA8 100%) !important;
  border: 1.5px solid #12ADA8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(18, 173, 168, 0.35) !important;
}

/* Archive Articles Grid Section */
.archive-articles-section {
  padding: 40px 0 70px;
}

/* Post Cards Grid */
.archive-articles-section .post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.post-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: opacity 0.25s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease;
  box-shadow: 0 4px 16px rgba(15, 45, 82, 0.04);
  height: 100%;
}

.post-card:hover {
  transform: translateY(-5px);
  border-color: #12ADA8;
  box-shadow: 0 16px 36px rgba(15, 45, 82, 0.08), 0 0 24px rgba(18, 173, 168, 0.14);
}

.post-thumb-link {
  display: block;
  text-decoration: none;
}

.post-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #F1F5F9;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.post-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 12px;
}

.post-meta .cat {
  color: #0C8B87;
  font-weight: 700;
  background: rgba(18, 173, 168, 0.08);
  border: 1px solid rgba(18, 173, 168, 0.22);
  padding: 3px 12px;
  border-radius: 50px;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.post-meta .read-time {
  color: #64748B;
  font-weight: 500;
}

.post-body h3 {
  font-size: 17.5px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-body h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.post-card:hover .post-body h3 a {
  color: #0C8B87;
}

.post-body .summary {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
  margin-top: auto;
}

.freshness-signal {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
}

.freshness-signal svg {
  flex-shrink: 0;
}

.read-article-link {
  font-size: 13.5px;
  font-weight: 700;
  color: #0C8B87;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.25s ease;
}

.read-article-link .arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.post-card:hover .read-article-link {
  color: #12ADA8;
}

.post-card:hover .read-article-link .arrow {
  transform: translateX(4px);
}

/* Empty State Card */
.empty-state-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px dashed #CBD5E1;
  padding: 48px 24px;
  text-align: center;
  margin: 30px auto;
  max-width: 540px;
  box-shadow: 0 4px 16px rgba(15, 45, 82, 0.03);
}

.empty-state-icon {
  margin-bottom: 14px;
}

.empty-state-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
}

.empty-state-card p {
  font-size: 14.5px;
  color: #64748B;
  margin-bottom: 20px;
  line-height: 1.5;
}

.empty-state-card .reset-filter-btn {
  margin: 0 auto;
}

@media (max-width: 992px) {
  .archive-articles-section .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .archive-articles-section .post-grid {
    grid-template-columns: 1fr;
  }

  .compact-archive-hero .archive-title {
    font-size: 24px;
  }
}

/* Post Cards Layout */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.post-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(15, 45, 82, 0.04);
  text-decoration: none;
  height: 100%;
}

.post-card:hover {
  transform: translateY(-6px);
  border-color: #12ADA8;
  box-shadow: 0 16px 36px rgba(15, 45, 82, 0.09), 0 0 20px rgba(18, 173, 168, 0.12);
}

.post-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #F1F5F9;
}

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

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

.post-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 12px;
}

.post-meta .cat {
  color: #0C8B87;
  font-weight: 700;
  background: rgba(18, 173, 168, 0.08);
  padding: 2px 8px;
  border-radius: 10px;
}

.post-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0B2545;
  margin-bottom: 10px;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.post-card:hover .post-body h3 {
  color: #0C8B87;
}

.post-body .summary {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 20px;
}

.post-body .rm {
  font-size: 13px;
  font-weight: 700;
  color: #0C8B87;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.25s ease;
}

.post-card:hover .post-body .rm {
  color: #12ADA8;
  border-top-color: rgba(18, 173, 168, 0.25);
}

@media (max-width: 992px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
}

/* ====================================================
   DISCOVERYTECHLAB TOOL CARDS DIRECTORY (MATCHING SCREENSHOT)
   ==================================================== */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.tool-card {
  background: #FFFFFF;
  border-radius: 24px;
  border: 1px solid #E5EEF5;
  padding: 26px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), border-color 250ms ease, box-shadow 250ms ease;
  position: relative;
}

.tool-card:hover {
  transform: translateY(-4px);
  border-color: #14B8A6;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09), 0 0 20px rgba(20, 184, 166, 0.12);
}

.tool-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tool-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #E6F7F5;
  color: #0C8B87;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tool-cat-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: #0284C7;
  background: #E0F2FE;
  padding: 5px 14px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tool-card[data-cat="collection"] .tool-cat-badge,
.tool-card[data-cat="ediscovery"] .tool-cat-badge {
  background: #E0F2FE;
  color: #0284C7;
}

.tool-card[data-cat="privacy"] .tool-cat-badge,
.tool-card[data-cat="compliance"] .tool-cat-badge {
  background: #F3E8FF;
  color: #9333EA;
}

.tool-card[data-cat="forensics"] .tool-cat-badge,
.tool-card[data-cat="investigation"] .tool-cat-badge {
  background: #DCFCE7;
  color: #16A34A;
}

.tool-card h3 {
  font-size: 19px;
  font-weight: 800;
  color: #0D2B52;
  margin-bottom: 10px;
  line-height: 1.35;
  transition: color 250ms ease;
}

.tool-card:hover h3 {
  color: #14B8A6;
}

.tool-card p {
  font-size: 14px;
  color: #64748B;
  line-height: 1.55;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 44px;
}

.tool-features-bar {
  background: #F8FAFC;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.tool-features-bar span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tool-features-bar span svg {
  color: #0D9488;
  flex-shrink: 0;
}

.tool-card-footer {
  margin-top: auto;
}

.tool-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  background: #0D2B52;
  color: #FFFFFF !important;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 12px;
  text-decoration: none !important;
  gap: 8px;
  transition: background 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}

.tool-link .arrow {
  display: inline-block;
  font-size: 15px;
  transition: transform 250ms ease;
}

.tool-card:hover .tool-link {
  background: #14B8A6;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 184, 166, 0.28);
}

.tool-card:hover .tool-link .arrow {
  transform: translateX(4px);
}

@media (max-width: 1380px) {
  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .tools-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tool-card {
    padding: 20px;
    border-radius: 20px;
  }
}

/* ====================================================
   PREMIUM SAAS CONTACT PAGE REDESIGN (Elementor & WPForms Ready)
   ==================================================== */
.contact-layout {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 32px;
  align-items: stretch;
  padding-bottom: 32px;
}

/* LEFT CARD (Direct Inquiries Information Card) */
.contact-info-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.contact-info-card:hover {
  transform: translateY(-3px);
  border-color: #12ADA8;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08), 0 0 20px rgba(18, 173, 168, 0.1);
}

.contact-info-card-content {
  display: flex;
  flex-direction: column;
}

.contact-info-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 10px;
  line-height: 1.3;
}

.contact-trust-footer {
  margin-top: 28px;
  padding: 14px 16px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #0C8B87;
  transition: background 200ms ease, border-color 200ms ease;
}

.contact-trust-footer:hover {
  background: #FFFFFF;
  border-color: rgba(18, 173, 168, 0.3);
}

.contact-trust-footer svg {
  flex-shrink: 0;
}

.contact-info-card p {
  font-size: 14.5px;
  color: #64748B;
  line-height: 1.6;
  margin-bottom: 28px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: #F8FAFC;
  border-radius: 14px;
  border: 1px solid #F1F5F9;
  margin-bottom: 16px;
  transition: background 200ms ease, border-color 200ms ease;
}

.contact-item:last-child {
  margin-bottom: 0;
}

.contact-item:hover {
  background: #FFFFFF;
  border-color: rgba(18, 173, 168, 0.3);
}

.contact-help-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0 0;
}

.contact-help-list li {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  position: relative;
  padding-left: 14px;
  margin-bottom: 3px;
}

.contact-help-list li:last-child {
  margin-bottom: 0;
}

.contact-help-list li::before {
  content: "\u2022";
  color: #0C8B87;
  font-weight: 800;
  position: absolute;
  left: 0;
  top: 0;
}

.contact-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(18, 173, 168, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-item-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-item-text strong {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
}

.contact-item-text span {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.5;
}

.contact-email-link {
  color: #0C8B87;
  font-weight: 600;
  text-decoration: none;
  transition: color 200ms ease;
}

.contact-email-link:hover {
  color: #12ADA8;
}

/* RIGHT CARD (Contact Form Container) */
.form-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 40px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  transition: box-shadow 250ms ease, border-color 250ms ease;
}

.form-box:hover {
  border-color: #CBD5E1;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.07);
}

.form-box h3 {
  font-size: 24px;
  font-weight: 800;
  color: #0F172A;
  margin-top: 0;
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font-size: 14.5px;
  font-family: inherit;
  color: #0F172A;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  box-sizing: border-box;
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-group textarea {
  width: 100%;
  min-height: 140px;
  padding: 14px 16px;
  font-size: 14.5px;
  font-family: inherit;
  color: #0F172A;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  box-sizing: border-box;
  resize: vertical;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: #12ADA8;
  box-shadow: 0 2px 10px rgba(18, 173, 168, 0.12);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #12ADA8;
  box-shadow: 0 0 0 3px rgba(18, 173, 168, 0.2);
  outline: none;
}

/* Custom Select Dropdown - Theme Mouse Hover Support */
.custom-select-container {
  position: relative;
  width: 100%;
}

.custom-select-trigger {
  width: 100%;
  height: 52px;
  padding: 0 40px 0 16px;
  font-size: 14.5px;
  font-family: inherit;
  color: #0F172A;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  user-select: none;
}

.custom-select-trigger:hover {
  border-color: #12ADA8;
  box-shadow: 0 2px 10px rgba(18, 173, 168, 0.12);
}

.custom-select-container.open .custom-select-trigger {
  border-color: #12ADA8;
  box-shadow: 0 0 0 3px rgba(18, 173, 168, 0.2);
}

.custom-select-trigger::after {
  content: '';
  width: 10px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 200ms ease;
}

.custom-select-container.open .custom-select-trigger::after {
  transform: rotate(180deg);
}

.custom-options-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.15);
  z-index: 999;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

.custom-select-container.open .custom-options-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.custom-option-item {
  padding: 13px 18px;
  font-size: 14.5px;
  color: #0F172A;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

/* THEME HOVER EFFECT ON MOUSE OVER */
.custom-option-item:hover {
  background-color: #12ADA8 !important;
  color: #FFFFFF !important;
}

.custom-option-item.selected {
  font-weight: 600;
  color: #0B2545;
  background-color: #F8FAFC;
}

.custom-option-item.selected:hover {
  background-color: #12ADA8 !important;
  color: #FFFFFF !important;
}

/* Submit Button */
.form-box button[type="submit"] {
  width: 100%;
  height: 52px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #12ADA8 0%, #0C8B87 100%);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(18, 173, 168, 0.25);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.form-box button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(18, 173, 168, 0.35);
  background: linear-gradient(135deg, #15c5bf 0%, #0e9e99 100%);
}

.form-box button[type="submit"]:active {
  transform: translateY(0);
}

/* Privacy Reassurance */
.privacy-reassurance {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #64748B;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #F1F5F9;
}

.privacy-reassurance svg {
  color: #0C8B87;
  flex-shrink: 0;
}

@media (max-width: 992px) {
  .contact-layout {
    grid-template-columns: 45% 55%;
    gap: 24px;
  }
}

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

  .form-box {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .contact-info-card {
    padding: 24px 20px;
    border-radius: 16px;
  }
}

/* ====================================================
   PREMIUM SAAS ABOUT US & LEGAL PAGES (Compact Spacing Matching Blog.html)
   ==================================================== */
.about-hero-section {
  padding: 36px 0 24px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border-bottom: 1px solid #E2E8F0;
  position: relative;
  overflow: hidden;
}

.about-hero-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.about-hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.about-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: #0C8B87;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(18, 173, 168, 0.08);
  padding: 6px 14px;
  border-radius: 20px;
  margin: 0 auto 12px;
  border: 1px solid rgba(18, 173, 168, 0.15);
  text-align: center;
}

.about-hero-title {
  font-size: 38px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
  max-width: 860px;
  margin: 0 auto 12px;
  text-align: center;
}

.about-hero-desc {
  font-size: 16px;
  color: #64748B;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.about-main-container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 28px;
  padding-bottom: 32px;
}

/* 1. Mission Card */
.about-mission-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 36px 40px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.about-mission-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #12ADA8 0%, #0C8B87 100%);
}

.about-mission-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.07);
}

.about-mission-card h2 {
  font-size: 26px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 18px;
  text-align: center;
}

.about-mission-card p {
  font-size: 15.5px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 16px;
  text-align: justify;
}

.about-mission-card p:last-child {
  margin-bottom: 0;
}

/* 2. EDRM Expertise Section */
.about-edrm-section {
  margin-bottom: 32px;
}

.about-edrm-section h2 {
  font-size: 26px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 24px;
  text-align: center;
}

.edrm-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.edrm-feature-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.edrm-feature-card:hover {
  transform: translateY(-4px);
  border-color: #12ADA8;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08), 0 0 20px rgba(18, 173, 168, 0.1);
}

.edrm-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(18, 173, 168, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.edrm-feature-card h4 {
  font-size: 19px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
  text-align: center;
}

.edrm-feature-card p {
  font-size: 14.5px;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
  text-align: justify;
}

/* 3. About DiscoveryTechLab Split Layout */
.about-brand-section {
  margin-bottom: 32px;
}

.about-brand-section h2 {
  font-size: 26px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 24px;
  text-align: center;
}

.about-brand-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 36px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.dtl-brand-showcase-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 24px;
  background: linear-gradient(145deg, #0B2545 0%, #123163 100%);
  border-radius: 16px;
  border: 1px solid rgba(31, 181, 179, 0.35);
  box-shadow: 0 10px 30px rgba(11, 37, 69, 0.2);
  min-width: 230px;
}

.dtl-brand-showcase-card .brand-logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.dtl-brand-showcase-card .logo-mark-large {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(31, 181, 179, 0.25) 0%, rgba(12, 139, 135, 0.4) 100%);
  border: 1.5px solid rgba(162, 232, 246, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.dtl-brand-showcase-card .brand-title-text {
  font-family: 'Poppins', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.dtl-brand-showcase-card .brand-title-text .brand-hl {
  color: #4FD1C5;
}

.dtl-brand-showcase-card .brand-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(31, 181, 179, 0.15);
  border: 1px solid rgba(31, 181, 179, 0.4);
  color: #A2E8F6;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-num {
  font-size: 16px;
  font-weight: 800;
  color: #0C8B87;
}

.badge-title {
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
}

.brand-bio-text p {
  font-size: 15.5px;
  color: #475569;
  line-height: 1.7;
  margin: 0;
  text-align: justify;
}

/* 4. Professional Highlights */
.about-highlights-section {
  margin-top: 35px;
  margin-bottom: 35px;
}

.highlights-container {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 40px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.highlights-container h3 {
  font-size: 24px;
  font-weight: 800;
  color: #0F172A;
  margin-top: 0;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid #F1F5F9;
  text-align: center;
}

.highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: #F8FAFC;
  border-radius: 14px;
  border: 1px solid #F1F5F9;
  font-size: 14.5px;
  color: #334155;
  line-height: 1.6;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  text-align: justify;
}

.highlights-list li:hover {
  background: #FFFFFF;
  border-color: rgba(18, 173, 168, 0.3);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.check-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(18, 173, 168, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* 5. Objective Section */
.about-objective-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 4px solid #12ADA8;
  border-radius: 18px;
  padding: 36px 40px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.about-objective-card h2 {
  font-size: 24px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 14px;
  text-align: center;
}

.about-objective-card p {
  font-size: 15.5px;
  color: #475569;
  line-height: 1.7;
  margin: 0;
  text-align: justify;
}

@media (max-width: 992px) {
  .edrm-cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-brand-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .brand-avatar-card {
    border-right: none;
    border-bottom: 1px solid #F1F5F9;
    padding-right: 0;
    padding-bottom: 20px;
  }
}

@media (max-width: 640px) {
  .about-hero-title {
    font-size: 28px;
  }

  .about-mission-card,
  .legal-card,
  .highlights-container,
  .about-objective-card,
  .about-brand-split {
    padding: 24px 20px;
    border-radius: 16px;
  }
}

/* Legal Pages Styling matching About Us */
.legal-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: #0F172A;
  margin-top: 24px;
  margin-bottom: 12px;
  text-align: center;
}

.legal-card h2 {
  margin-top: 32px;
  text-align: center;
}

.legal-card h2:first-child {
  margin-top: 0;
}

/* Footer Responsive Media Queries */
@media (max-width: 1024px) {
  footer.site-footer .container {
    padding: 0 24px;
  }

  .footer-newsletter {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 20px;
  }

  .newsletter-content,
  .newsletter-action {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }

  .footer-brand-col .footer-desc,
  .footer-founder-info {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  footer.site-footer {
    padding: 40px 0 0;
  }

  .footer-newsletter {
    padding: 24px 20px;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form input[type="email"],
  .btn-subscribe {
    width: 100%;
    justify-content: center;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-seo {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 14px;
    justify-content: center;
  }
}

/* Responsive eDiscovery Lifecycle Timeline - Tablet Rows & Mobile Swipe Carousel */
@media (max-width: 1024px) and (min-width: 641px) {

  /* Tablet: Cards wrap into logical rows */
  .lifecycle-stages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  .timeline-track-line {
    display: none;
  }
}

@media (max-width: 840px) and (min-width: 641px) {
  .lifecycle-stages-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 640px) {

  /* Mobile: Converts into a horizontal swipe timeline */
  .ediscovery-lifecycle-section {
    padding: 44px 0 36px;
  }

  .lifecycle-timeline-wrapper {
    position: relative;
  }

  .lifecycle-stages-grid {
    display: flex;
    overflow-x: auto;
    /* scroll-snap-type: disabled for smooth js scrolling */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
    gap: 14px;
    scrollbar-width: thin;
    scrollbar-color: #12ADA8 rgba(255, 255, 255, 0.08);
  }

  .lifecycle-stages-grid::-webkit-scrollbar {
    height: 5px;
  }

  .lifecycle-stages-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
  }

  .lifecycle-stages-grid::-webkit-scrollbar-thumb {
    background: #12ADA8;
    border-radius: 4px;
  }

  .lifecycle-stage-card {
    flex: 0 0 225px;
    min-width: 225px;

    padding: 14px 12px;
  }

  .timeline-track-line {
    display: none;
  }

  .ediscovery-lifecycle-section .title-gradient {
    font-size: 25px;
  }

  .lifecycle-geo-note {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================================
   Coming Soon Modal Overlay & Card Styling
   ========================================================================== */
.coming-soon-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(7, 27, 56, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 999999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.coming-soon-modal-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.coming-soon-modal-card {
  background: linear-gradient(145deg, #0B2545 0%, #061A33 100%);
  border: 1px solid rgba(37, 211, 196, 0.35);
  border-radius: 20px;
  max-width: 540px;
  width: 100%;
  padding: 36px 32px;
  color: #FFFFFF;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(18, 173, 168, 0.2);
  transform: translateY(0);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

.coming-soon-modal-overlay.active .coming-soon-modal-card {
  transform: translateY(0) scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 18px;
  right: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
}

.modal-close-btn:hover {
  background: #12ADA8;
  border-color: #12ADA8;
  color: #FFFFFF;
  transform: rotate(90deg);
}

.modal-badge-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(18, 173, 168, 0.15);
  color: #48E5E0;
  border: 1px solid rgba(18, 173, 168, 0.35);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}

.modal-tool-title {
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 18px;
  line-height: 1.3;
}

.modal-tool-title span {
  color: #48E5E0;
}

.modal-section-box {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3.5px solid #12ADA8;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.modal-section-label {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  margin-bottom: 4px;
}

.modal-tool-desc {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.modal-status-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 14px;
}

.modal-sub-text {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 28px;
}

.modal-action-row {
  display: flex;
  justify-content: flex-end;
}

.btn-modal-back {
  padding: 12px 28px;
  border-radius: 30px;
  background: linear-gradient(135deg, #12ADA8 0%, #0C8B87 100%);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(18, 173, 168, 0.35);
}

.btn-modal-back:hover {
  background: linear-gradient(135deg, #48E5E0 0%, #12ADA8 100%);
  color: #071931;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(18, 173, 168, 0.5);
}

/* ==========================================================================
   Single Tool Dedicated Coming Soon Page Styling (Premium SaaS Design)
   ========================================================================== */
.single-tool-body {
  background: #061A33;
  color: #FFFFFF;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.single-tool-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px 72px;
  position: relative;
  background: #061A33;
  background-image:
    radial-gradient(circle at 50% 15%, rgba(18, 173, 168, 0.045) 0%, transparent 60%),
    radial-gradient(circle at 85% 85%, rgba(72, 229, 224, 0.02) 0%, transparent 50%);
  overflow: hidden;
}

.single-tool-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.035;
  pointer-events: none;
}

/* Main Card Container with Micro-Animation */
.tool-coming-soon-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(145deg, #0A1F3B 0%, #06172E 100%);
  border: 1px solid rgba(18, 173, 168, 0.22);
  border-radius: 16px;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 36px 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(18, 173, 168, 0.08);
  text-align: left;
  animation: toolCardFadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toolCardFadeUp {
  0% {
    opacity: 0.9;
    transform: translateY(0);
  }

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

/* Status Header Bar */
.tool-card-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.tool-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(18, 173, 168, 0.1);
  color: #48E5E0;
  border: 1px solid rgba(18, 173, 168, 0.3);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  letter-spacing: 0.02em;
}

/* Tool Title Header */
.tool-title-header {
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 18px;
}

.tool-category-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #12ADA8;
  background: rgba(18, 173, 168, 0.1);
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(18, 173, 168, 0.25);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.tool-heading {
  font-size: 28px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}

.tool-name-gradient {
  background: linear-gradient(135deg, #FFFFFF 40%, #48E5E0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tool-subtitle {
  font-size: 13.5px;
  color: #94A3B8;
  margin: 0 0 14px;
  font-weight: 500;
}

/* Optional Micro Badges Tags */
.tool-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tool-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  color: #94A3B8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 10px;
  border-radius: 6px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.tool-tag.status-tag {
  color: #48E5E0;
  background: rgba(18, 173, 168, 0.08);
  border-color: rgba(18, 173, 168, 0.25);
}

/* Modernized Description Card */
.tool-desc-box {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(18, 173, 168, 0.2);
  border-left: 3px solid #12ADA8;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.desc-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.tool-desc-label {
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: #48E5E0;
  font-weight: 700;
}

.tool-desc-box p {
  font-size: 14px;
  color: #E2E8F0;
  line-height: 1.55;
  margin: 0;
}

/* Notice Body Text */
.tool-notice-body {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tool-notice-text {
  font-size: 14px;
  color: #CBD5E1;
  line-height: 1.6;
  margin: 0;
}

/* Action Area & Button */
.tool-action-area {
  display: flex;
  justify-content: flex-end;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-back-tools {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 50px;
  background: linear-gradient(135deg, #12ADA8 0%, #0C8B87 100%);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.3);
  outline: none;
}

.btn-back-tools:hover,
.btn-back-tools:focus-visible {
  background: linear-gradient(135deg, #48E5E0 0%, #12ADA8 100%);
  color: #071931;
  transform: translateX(-3px);
  box-shadow: 0 6px 20px rgba(18, 173, 168, 0.45);
  outline: 2px solid #48E5E0;
  outline-offset: 2px;
}

.btn-back-tools svg {
  transition: transform 0.25s ease;
}

.btn-back-tools:hover svg {
  transform: translateX(-3px);
}

/* Tool Notice Footer & Buttons (Coming Soon Page Dark Card High Contrast) */
.tool-notice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tool-notice-footer .btn,
.tool-coming-soon-card .tool-notice-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
  line-height: 1.3;
}

/* Secondary Button: Back to Tools Directory */
.tool-notice-footer .btn-secondary,
.tool-coming-soon-card .btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #E2E8F0 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
}

.tool-notice-footer .btn-secondary:hover,
.tool-coming-soon-card .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-1px);
}

/* Primary Button: Request Early Beta Access */
.tool-notice-footer .btn-primary,
.tool-coming-soon-card .btn-primary {
  background: linear-gradient(135deg, #12ADA8 0%, #0C8B87 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #12ADA8 !important;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.35) !important;
}

.tool-notice-footer .btn-primary:hover,
.tool-coming-soon-card .btn-primary:hover {
  background: linear-gradient(135deg, #48E5E0 0%, #12ADA8 100%) !important;
  color: #071931 !important;
  border-color: #48E5E0 !important;
  box-shadow: 0 6px 20px rgba(18, 173, 168, 0.5) !important;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .single-tool-wrapper {
    padding: 36px 16px 48px;
  }

  .tool-coming-soon-card {
    padding: 24px 20px 20px;
    border-radius: 14px;
  }

  .tool-heading {
    font-size: 22px;
  }

  .tool-action-area {
    justify-content: center;
  }

  .btn-back-tools {
    width: 100%;
  }
}

/* About Page CTA Buttons Hover Effects */
.btn-about-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.btn-about-cta.teal {
  background: var(--teal);
  color: var(--white);
  border: 2px solid var(--teal);
}

.btn-about-cta.teal:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(18, 173, 168, 0.4);
}

.btn-about-cta.navy {
  background: var(--navy);
  color: var(--white);
  border: 2px solid var(--navy);
}

.btn-about-cta.navy:hover {
  background: var(--navy-2);
  border-color: var(--navy-2);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11, 37, 69, 0.35);
}

.btn-about-cta .arrow {
  transition: transform 0.25s ease;
  display: inline-block;
}

.btn-about-cta:hover .arrow {
  transform: translateX(5px);
}













/* ==========================================================================
   ORIGINAL CLEAN MEGAMENU ENGINE
   ========================================================================== */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(11, 37, 69, 0.05);
}

.site-header .header-inner {
  position: relative !important;
}

nav.main-nav ul li.has-megamenu {
  position: static !important;
}

.megamenu-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 24px;
  right: 24px;
  width: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 20px 45px rgba(11, 37, 69, 0.18);
  padding: 20px 28px 28px;
  z-index: 1200;
  max-height: 75vh;
  overflow-y: auto;
}

.megamenu-panel::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  height: 30px;
  background: transparent;
}

nav.main-nav ul li.has-megamenu:hover .megamenu-panel,
nav.main-nav ul li.has-megamenu.is-hovered .megamenu-panel,
nav.main-nav ul li.has-megamenu.open .megamenu-panel {
  display: block;
}












/* ==========================================================================
   HEADER ACTIVE TAB PILLS & COMPACT MEGAMENU SUB-LINKS FIX
   ========================================================================== */
nav.main-nav>ul {
  gap: 6px !important;
}

nav.main-nav>ul>li {
  white-space: nowrap !important;
}

/* Top-Level Header Navigation Links Base */
nav.main-nav>ul>li>a {
  padding: 6px 12px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

/* Active Pill Style ONLY for Top-Level Header Navigation Links (Includes Tools Parent Header Item) */
.site-header nav.main-nav>ul>li>a.active,
.site-header nav.main-nav>ul>li.has-megamenu>a.active,
.site-header nav.main-nav>ul>li.has-megamenu>a.megamenu-trigger.active,
.site-header nav.main-nav>ul>li.has-dropdown>a.active,
.site-header nav.main-nav>ul>li.has-dropdown>a.dropdown-trigger.active {
  color: #0d807c !important;
  background: rgba(18, 173, 168, 0.12) !important;
  border-bottom: 2.5px solid #12ADA8 !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* Megamenu Sub-menu Links (Clean, Compact Text Links - NO Pill Styling) */
.megamenu-panel .megamenu-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.megamenu-panel .megamenu-links li {
  margin: 0 !important;
  padding: 1.5px 0 !important;
  /* Compact vertical spacing */
  white-space: normal !important;
}

.megamenu-panel .megamenu-links a,
.megamenu-panel .megamenu-links a.active {
  color: var(--navy) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 3px 6px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  display: inline-block !important;
  border-radius: 4px !important;
}

.megamenu-panel .megamenu-links a:hover {
  color: var(--teal-dark) !important;
  background: rgba(18, 173, 168, 0.08) !important;
  border: none !important;
}



/* ==========================================================================
   PERFECT FULL-WIDTH MEGAMENU, HOVER PILL SHAPE & TEAL BOTTOM LINE ENGINE
   ========================================================================== */

header.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(11, 37, 69, 0.05) !important;
}

.site-header .header-inner {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 24px !important;
  max-width: var(--maxw) !important;
  margin: 0 auto !important;
}

.site-header nav.main-nav {
  position: static !important;
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
}

.site-header nav.main-nav>ul,
.site-header nav.main-nav>ul>li.has-megamenu {
  position: static !important;
}

.site-header nav.main-nav>ul>li.has-dropdown {
  position: relative !important;
}

nav.main-nav>ul {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

nav.main-nav>ul>li {
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Base Navigation Link with Reserved Bottom Line (Prevents Any Vertical Jump) */
nav.main-nav>ul>li>a {
  padding: 6px 10px !important;
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  background: transparent !important;
  border-radius: 6px !important;
  border-bottom: 3px solid transparent !important;
  /* Thin bottom line reserved space */
  white-space: nowrap !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1.2 !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

/* Hover State: Soft Teal Pill Background Shape + Thin Teal Line at Bottom */
nav.main-nav>ul>li>a:hover,
nav.main-nav>ul>li.has-dropdown:hover>a,
nav.main-nav>ul>li.has-dropdown.is-hovered>a,
nav.main-nav>ul>li.has-dropdown.open>a,
nav.main-nav>ul>li.has-megamenu:hover>a,
nav.main-nav>ul>li.has-megamenu.is-hovered>a,
nav.main-nav>ul>li.has-megamenu.open>a {
  color: #0c8b87 !important;
  background: rgba(18, 173, 168, 0.07) !important;
  border-bottom: 2px solid rgba(18, 173, 168, 0.4) !important;
  border-radius: 6px !important;
}

/* Active Page State: Soft Teal Pill Background Shape + Solid Thin Teal Bottom Line */
.site-header nav.main-nav>ul>li>a.active,
.site-header nav.main-nav>ul>li.has-megamenu>a.active,
.site-header nav.main-nav>ul>li.has-megamenu>a.megamenu-trigger.active,
.site-header nav.main-nav>ul>li.has-dropdown>a.active,
.site-header nav.main-nav>ul>li.has-dropdown>a.dropdown-trigger.active {
  color: #0c8b87 !important;
  background: rgba(18, 173, 168, 0.15) !important;
  border-bottom: 5px solid #12ADA8 !important;
  /* Thin teal bottom indicator line */
  font-weight: 600 !important;
  border-radius: 6px !important;
}

/* Search Box Fixed Dimensions */
.header-search .search-box {
  max-width: 200px !important;
  width: 200px !important;
  background: var(--bg-light) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 4px 6px 4px 14px !important;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
}

.header-search .search-box:focus-within {
  border-color: var(--teal) !important;
  background: var(--white) !important;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.2) !important;
  max-width: 200px !important;
  width: 200px !important;
}

/* FULL-WIDTH MEGAMENU PANEL */
.megamenu-panel {
  display: none;
  position: absolute !important;
  top: 100% !important;
  left: 24px !important;
  right: 24px !important;
  width: calc(100% - 48px) !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-bottom: 5px solid #12ADA8 !important;
  border-bottom: 5px solid #12ADA8 !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  box-shadow: 0 16px 36px rgba(11, 37, 69, 0.14) !important;
  padding: 24px 28px 28px !important;
  z-index: 1200 !important;
  max-height: 75vh !important;
  overflow-y: auto !important;
}

/* Seamless Overlapping Hover Bridge to prevent dropdown closure during mouse movement */
.megamenu-panel::before {
  content: "";
  position: absolute;
  top: -30px !important;
  /* Extends 30px UPWARDS to cover the header padding gap completely */
  left: 0 !important;
  right: 0 !important;
  height: 35px !important;
  background: transparent !important;
  pointer-events: auto !important;
  z-index: 1201 !important;
}

/* Maintain Megamenu open state seamlessly */
nav.main-nav ul li.has-megamenu:hover>.megamenu-panel,
nav.main-nav ul li.has-megamenu.is-hovered>.megamenu-panel,
nav.main-nav ul li.has-megamenu.open>.megamenu-panel {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 4-Column Megamenu Grid Layout */
.megamenu-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.megamenu-cat {
  background: var(--bg-light) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--border) !important;
  transition: all var(--transition) !important;
}

.megamenu-cat:hover {
  border-color: var(--teal) !important;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.12) !important;
  background: #FFFFFF !important;
}

/* Megamenu Sub-menu Links */
.megamenu-panel .megamenu-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.megamenu-panel .megamenu-links li {
  margin: 0 !important;
  padding: 1.5px 0 !important;
  white-space: normal !important;
}

.megamenu-panel .megamenu-links a,
.megamenu-panel .megamenu-links a.active {
  color: var(--navy) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 3px 6px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  display: inline-block !important;
  border-radius: 4px !important;
}

.megamenu-panel .megamenu-links a:hover {
  color: var(--teal-dark) !important;
  background: rgba(18, 173, 168, 0.08) !important;
  border: none !important;
}

/* Strict No-Shrink / No-Scale for All Header & Megamenu Elements */
.site-header nav.main-nav a,
.site-header nav.main-nav a:hover,
.site-header nav.main-nav a:focus,
.site-header nav.main-nav a:active,
.site-header nav.main-nav a:visited,
.megamenu-panel a,
.megamenu-panel a:hover,
.megamenu-panel a:focus,
.megamenu-panel a:active {
  transform: none !important;
  scale: 1 !important;
  zoom: 1 !important;
  animation: none !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}


/* ==========================================================================
   UNIVERSAL EYEBROW PILL BADGE STYLING (MATCHES ABOUT US HERO DESIGN)
   ========================================================================== */
.eyebrow,
.archive-eyebrow,
.tool-category-label,
.section-head .eyebrow,
.hero-content .eyebrow,
.compact-archive-hero .eyebrow,
.post-header .eyebrow,
.article-header .eyebrow,
.single-tool-wrapper .tool-category-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0c8b87 !important;
  background: rgba(18, 173, 168, 0.12) !important;
  border: 1px solid rgba(18, 173, 168, 0.3) !important;
  padding: 5px 16px !important;
  border-radius: 20px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 2px 8px rgba(18, 173, 168, 0.08) !important;
  transition: all 0.2s ease !important;
}

.eyebrow:hover,
.archive-eyebrow:hover,
.tool-category-label:hover {
  background: rgba(18, 173, 168, 0.18) !important;
  border-color: rgba(18, 173, 168, 0.45) !important;
  color: #096a67 !important;
}


/* ==========================================================================
   CATEGORY FILTER HORIZONTAL SCROLL & ARROW ENGINE
   ========================================================================== */
.filter-nav-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 100% !important;
}

.filter-scroll-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow-x: scroll !important;
  scroll-behavior: smooth !important;
  padding: 8px 16px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex-grow: 1 !important;
  max-width: 100% !important;
  cursor: grab !important;
  user-select: none !important;
}

.filter-scroll-wrapper::-webkit-scrollbar {
  display: none !important;
}

.scroll-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(15, 45, 82, 0.12) !important;
  transition: all 0.25s ease !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
  outline: none !important;
  line-height: 1 !important;
}

.scroll-arrow:hover {
  background: #12ADA8 !important;
  border-color: #12ADA8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(18, 173, 168, 0.35) !important;
}


/* ==========================================================================
   FLEXBOX SCROLL FIX FOR CATEGORY FILTER BAR
   ========================================================================== */
.filter-nav-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.filter-scroll-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  padding: 8px 16px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex: 1 1 0% !important;
  /* CRITICAL: Allows wrapper to constrain width and scroll horizontally */
  min-width: 0 !important;
  /* CRITICAL: Prevents flex child from expanding to content width */
  max-width: 100% !important;
  cursor: grab !important;
  user-select: none !important;
}

.filter-scroll-wrapper::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.scroll-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(15, 45, 82, 0.12) !important;
  transition: all 0.25s ease !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
  outline: none !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 4px !important;
}

.scroll-arrow:hover {
  background: #12ADA8 !important;
  border-color: #12ADA8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(18, 173, 168, 0.35) !important;
}

/* Featured Tool Card Style (as in screenshot) */
.veridex-featured-card {
  position: relative;
  background: #FFFFFF;
  border: 1.5px solid rgba(18, 173, 168, 0.25);
  border-radius: 20px;
  padding: 28px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(18, 173, 168, 0.07), 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.veridex-featured-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(18, 173, 168, 0.18), 0 0 0 1.5px rgba(18,173,168,0.5);
  border-color: #12ADA8;
}

/* Diagonal Ribbon on top right */
.veridex-featured-card .ribbon-badge {
  position: absolute;
  top: 18px;
  right: -32px;
  background: #0B2545;
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 34px;
  transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(11, 37, 69, 0.2);
  z-index: 2;
  pointer-events: none;
}

.veridex-featured-card .ribbon-badge span {
  color: #F59E0B;
}

/* Top Header Info Row */
.veridex-featured-card .card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.veridex-featured-card .icon-box {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, rgba(18, 173, 168, 0.12) 0%, rgba(18, 173, 168, 0.06) 100%);
  border-radius: 10px;
  border: 1px solid rgba(18, 173, 168, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #12ADA8;
}

.veridex-featured-card .module-pill {
  font-size: 11px;
  font-weight: 700;
  color: #0C8B87;
  background: rgba(18, 173, 168, 0.12);
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 28px;
}

/* Content Area */
.veridex-featured-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.veridex-featured-card p {
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

/* Checkmarks Row */
.veridex-featured-card .features-check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F8FFFE;
  border: 1px solid rgba(18,173,168,0.12);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 20px;
}

.veridex-featured-card .features-check-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.veridex-featured-card .features-check-row span svg {
  stroke: #12ADA8;
}

/* Action Launch Button */
.veridex-featured-card .launch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #0B2545;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.veridex-featured-card:hover .launch-btn {
  background: #12ADA8;
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(18, 173, 168, 0.35);
}

.veridex-featured-card .launch-btn .btn-arrow {
  transition: transform 0.25s ease;
}

.veridex-featured-card:hover .launch-btn .btn-arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   VERIDEX Product Suite \u2014 Modern Enterprise SaaS Design System
   ========================================================================== */

/* Hero Section - Clean Enterprise SaaS Layout */
.v-product-hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  padding: 52px 0 44px 0;
  color: #FFFFFF;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 993px) {
  .v-product-hero {
    padding: 52px 0 44px 0;
  }
}

.v-product-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.15) 0%, rgba(15, 23, 42, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.v-product-hero .container {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 24px;
}

.v-hero-badge {
  background: rgba(18, 173, 168, 0.15);
  color: #A2E8F6;
  border: 1px solid rgba(162, 232, 246, 0.3);
  padding: 5px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(18, 173, 168, 0.1);
}

.v-hero-title {
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 12px;
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.4px;
}

.v-hero-desc {
  font-size: 1.02rem;
  line-height: 1.6;
  color: #CBD5E1;
  max-width: 820px;
  margin: 0 auto 20px auto;
  font-weight: 400;
}

.v-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 960px;
  margin: 0 auto;
}

.v-hero-badge-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #E2E8F0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.v-hero-badge-card:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(162, 232, 246, 0.5);
  transform: translateY(-2px);
}

/* SaaS Main Layout & Sections */
.v-main-container {
  padding-top: 48px;
  padding-bottom: 24px;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.prose {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #2D3748;
}

.prose p,
article.prose p {
  text-align: left;
}

.v-section {
  margin-bottom: 64px;
}

.v-section:last-of-type,
section.v-section:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.v-section-head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 52px auto;
}

.v-section-title {
  color: var(--navy) !important;
  font-size: 2.25rem;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}

.v-section-desc {
  color: #64748B;
  font-size: 1.1rem;
  line-height: 1.75;
}

/* Grids & Cards */
.v-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.v-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.v-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  border-color: #CBD5E1;
}

.v-card-alert {
  border-top: 4px solid #EF4444;
}

.v-card-teal {
  border-left: 5px solid #12ADA8;
}

.v-card-navy {
  border-top: 4px solid var(--navy);
}

.v-card-blue {
  border-top: 4px solid #3B82F6;
}

.v-card-title {
  color: var(--navy) !important;
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 12px;
  font-family: 'Poppins', sans-serif;
}

.v-card-text {
  font-size: 0.98rem;
  color: #475569;
  margin: 0;
  line-height: 1.75;
}

.v-card-list {
  padding-left: 18px;
  margin: 14px 0 0 0;
  color: #334155;
  font-size: 0.94rem;
  line-height: 1.7;
}

.v-card-list li {
  margin-bottom: 8px;
}

.v-card-list li:last-child {
  margin-bottom: 0;
}

/* 6-Stage Workflow & Card Containers */
.v-workflow-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 44px;
  margin-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.v-step-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
  margin-bottom: 24px;
}

.v-step-card:last-child {
  margin-bottom: 0;
}

.v-step-card:hover {
  border-color: #12ADA8;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(18, 173, 168, 0.12);
}

.v-usecase-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.v-usecase-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 5px solid #12ADA8;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  transition: all 0.3s ease;
  margin-bottom: 24px;
}

.v-usecase-card:last-child {
  margin-bottom: 0;
}

.v-usecase-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.v-step-num {
  background: rgba(18, 173, 168, 0.1);
  color: #12ADA8;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 18px;
}

.v-step-title {
  color: var(--navy) !important;
  font-size: 1.18rem;
  font-weight: 700;
  margin-bottom: 10px;
  font-family: 'Poppins', sans-serif;
}

.v-step-desc {
  color: #475569;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.65;
}

/* Dark Glass Banner / Why Section */
.v-dark-banner {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 20px;
  padding: 60px 44px;
  color: #FFFFFF;
  margin-bottom: 64px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
}

.v-dark-banner .v-section-title {
  color: #FFFFFF !important;
}

.v-dark-banner .v-section-desc {
  color: #CBD5E1;
}

.v-glass-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 28px;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}

.v-glass-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(162, 232, 246, 0.4);
  transform: translateY(-3px);
}

.v-glass-card-title {
  color: #A2E8F6 !important;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 12px;
  font-family: 'Poppins', sans-serif;
}

.v-glass-card-desc {
  color: #E2E8F0;
  font-size: 0.96rem;
  margin: 0;
  line-height: 1.65;
}

/* Real-World Use Cases */
.v-usecase-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.v-usecase-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 5px solid #12ADA8;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  transition: all 0.3s ease;
}

.v-usecase-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.v-usecase-title {
  color: var(--navy) !important;
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 12px;
  font-family: 'Poppins', sans-serif;
}

.v-usecase-challenge {
  color: #475569;
  margin-bottom: 16px;
  font-size: 0.98rem;
  line-height: 1.7;
}

.v-usecase-solution {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px 24px;
  font-size: 0.96rem;
  color: #334155;
  line-height: 1.75;
}

/* AI Overview & Governance Blocks */
.v-ai-block {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.v-ai-block-teal {
  border-left: 5px solid #12ADA8;
}

.v-ai-block-red {
  border-left: 5px solid #EF4444;
}

.v-ai-title {
  color: var(--navy) !important;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Poppins', sans-serif;
}

.v-ai-text {
  color: #475569;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.75;
}

.v-governance-box {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 64px;
}

.v-quote-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 24px;
}

/* Comparison Table */
.v-table-wrapper {
  overflow-x: auto;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
  background: #FFFFFF;
}

.v-compare-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.95rem;
}

.v-compare-table th {
  padding: 20px 24px;
  border-bottom: 2px solid #334155;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

.v-compare-table th.v-veridex-head {
  border-bottom: 2px solid #A2E8F6;
  background: #1E293B;
  color: #A2E8F6;
}

.v-compare-table td {
  padding: 18px 24px;
  border-bottom: 1px solid #E2E8F0;
  vertical-align: middle;
}

.v-compare-table tr:last-child td {
  border-bottom: none;
}

.v-compare-table tr:nth-child(even) {
  background: #F8FAFC;
}

.v-compare-table td.v-veridex-cell {
  font-weight: 700;
  color: #059669;
  background: #F0FDF4;
}

/* Modern FAQ Accordion */
.v-faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.v-faq-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 22px 28px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
  transition: all 0.25s ease;
}

.v-faq-item[open] {
  border-color: #CBD5E1;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

.v-faq-summary {
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  font-size: 1.08rem;
  font-family: 'Poppins', sans-serif;
  outline: none;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.v-faq-summary::-webkit-details-marker {
  display: none;
}

.v-faq-summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 600;
  color: #12ADA8;
  transition: transform 0.2s ease;
  margin-left: 12px;
}

.v-faq-item[open] .v-faq-summary::after {
  content: '\u2212';
}

.v-faq-content {
  margin-top: 14px;
  color: #475569;
  font-size: 0.98rem;
  line-height: 1.75;
}

/* High-Converting CTA Banner */
.v-cta-banner {
  background: linear-gradient(135deg, #12ADA8 0%, #0F172A 100%);
  border-radius: 20px;
  padding: 64px 44px;
  text-align: center;
  color: #FFFFFF;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.15);
  position: relative;
  overflow: hidden;
  margin-bottom: 64px;
}

.v-cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(162, 232, 246, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.v-cta-container {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.v-cta-title {
  font-size: 2.5rem;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  margin-top: 0;
  margin-bottom: 18px;
  color: #FFFFFF !important;
  letter-spacing: -0.4px;
}

.v-cta-desc {
  font-size: 1.18rem;
  line-height: 1.75;
  color: #E2E8F0;
  margin-bottom: 36px;
}

.v-cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.v-cta-actions .v-btn-primary,
.v-cta-actions a.v-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.98rem;
  font-family: 'Inter', sans-serif;
  text-decoration: none !important;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.v-cta-actions .v-btn-primary:hover,
.v-cta-actions a.v-btn-primary:hover {
  background: #F8FAFC !important;
  color: #12ADA8 !important;
  border-color: #F8FAFC !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.v-cta-actions .v-btn-secondary,
.v-cta-actions a.v-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.98rem;
  font-family: 'Inter', sans-serif;
  text-decoration: none !important;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
  cursor: pointer;
}

.v-cta-actions .v-btn-secondary:hover,
.v-cta-actions a.v-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Responsive Styles for VERIDEX Product Suite & Site Components */
@media (max-width: 992px) {
  .v-product-hero {
    padding: 36px 0 30px 0;
  }
  .v-hero-title {
    font-size: 2rem;
  }
  .v-cta-title {
    font-size: 1.85rem;
  }
  .v-workflow-box {
    padding: 32px 20px;
  }
  .v-dark-banner {
    padding: 32px 20px;
  }
  .header-search .search-box {
    max-width: 150px;
  }
}

@media (max-width: 768px) {
  .v-product-hero {
    padding: 28px 0 24px 0;
  }
  .v-hero-title {
    font-size: 1.65rem;
  }
  .v-hero-desc {
    font-size: 0.95rem;
  }
  .v-hero-highlights {
    grid-template-columns: 1fr;
  }
  .v-section-title {
    font-size: 1.8rem;
  }
  .v-main-container {
    padding-top: 36px;
    padding-bottom: 60px;
  }
  .v-section {
    margin-bottom: 48px;
  }
  .v-cta-banner {
    padding: 44px 20px;
  }
  .v-cta-title {
    font-size: 1.65rem;
  }
  .v-card {
    padding: 24px;
  }
  .v-usecase-card {
    padding: 24px;
  }
  .v-ai-block {
    padding: 20px;
  }
  .v-compare-table {
    min-width: 580px;
  }
  .v-compare-table th,
  .v-compare-table td {
    padding: 14px 16px;
    font-size: 0.88rem;
  }
}

@media (max-width: 640px) {
  .footer-newsletter {
    padding: 32px 20px;
    text-align: center;
  }
  .newsletter-form {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .newsletter-form input,
  .newsletter-form .btn-subscribe {
    width: 100%;
    border-radius: 10px;
  }
  .v-hero-badge-card {
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .header-search {
    display: none;
  }
  .v-hero-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
  }
  .v-hero-badge-card {
    width: 100%;
    justify-content: center;
    padding: 8px 10px;
    font-size: 0.74rem;
  }
  .v-hero-title {
    font-size: 1.45rem;
  }
  .archive-filter-nav {
    padding: 4px 0;
  }
  .scroll-arrow {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 16px !important;
    margin: 0 2px !important;
  }
  .filter-scroll-wrapper {
    padding: 6px 8px !important;
    gap: 6px !important;
  }
}

/* ==========================================================================
   Executive Problem-Solution Framework Redesign
   ========================================================================== */
.exec-framework-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-top: 4px solid #12ADA8;
  border-radius: 16px;
  padding: 28px 32px;
  margin: 36px 0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.exec-framework-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #F1F5F9;
  flex-wrap: wrap;
  gap: 12px;
}

.exec-framework-title {
  color: #FFFFFF !important;
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
}

.exec-framework-tag {
  background: rgba(18, 173, 168, 0.1);
  color: #12ADA8;
  border: 1px solid rgba(18, 173, 168, 0.25);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.8px;
}

.exec-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  .exec-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .exec-card-grid {
    grid-template-columns: 1fr;
  }
}

.exec-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  position: relative;
}

.exec-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  border-color: #CBD5E1;
}

.exec-card-step {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #64748B;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.exec-card-heading {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
  font-family: 'Poppins', sans-serif;
  line-height: 1.35;
}

.exec-card-text {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

/* Card 4 Highlight \u2014 The VERIDEX Solution */
.exec-card-solution {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border: 1px solid #12ADA8;
  color: #FFFFFF;
  box-shadow: 0 8px 25px rgba(18, 173, 168, 0.2);
}

.exec-card-solution:hover {
  border-color: #A2E8F6;
  box-shadow: 0 12px 30px rgba(18, 173, 168, 0.3);
}

.exec-card-solution .exec-card-step {
  color: #A2E8F6;
}

.exec-card-solution .exec-card-heading {
  color: #FFFFFF;
}

.exec-card-solution .exec-card-text {
  color: #E2E8F0;
}




/* ==========================================================================
   Global Responsive Container & Section Spacing
   Standardizes layout width and vertical padding across all pages to match
   the About Us page enterprise-style centered layout.
   ========================================================================== */

/* Tablet: \u2264 992px */
@media (max-width: 992px) {
  .container {
    padding: 0 32px;
  }
  .section {
    padding: var(--section-pad-tablet) 0;
  }
  .section.tight {
    padding: calc(var(--section-pad-tablet) * 0.75) 0;
  }
}

/* Mobile: \u2264 640px */
@media (max-width: 640px) {
  .container {
    padding: 0 16px;
  }
  .section {
    padding: var(--section-pad-mobile) 0;
  }
  .section.tight {
    padding: calc(var(--section-pad-mobile) * 0.75) 0;
  }
}

/* ==========================================================================
   ENTERPRISE SAAS VERIDEX PRODUCT PAGE STYLING SYSTEM
   ========================================================================== */

/* 1. HERO SECTION */
.v-product-hero {
  background: linear-gradient(135deg, #0B2545 0%, #06152B 50%, #0A4E6B 100%);
  color: #FFFFFF;
  padding: 52px 0 44px;
  position: relative;
  overflow: hidden;
}
.v-product-hero::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(18, 173, 168, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.v-product-hero::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(10, 78, 107, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.v-product-hero .container {
  position: relative;
  z-index: 2;
}

.v-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 173, 168, 0.16);
  border: 1px solid rgba(18, 173, 168, 0.4);
  color: #A2E8F6;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 24px;
  backdrop-filter: blur(6px);
}

.v-hero-title {
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 800;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  line-height: 1.15;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}

.v-hero-desc {
  font-size: 18px;
  color: #CBD5E1;
  max-width: 820px;
  margin: 0 auto 36px auto;
  line-height: 1.7;
  font-family: 'Inter', sans-serif;
  text-align: center;
}

.v-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 28px auto 0;
  max-width: 960px;
}

.v-hero-badge-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #F8FAFC;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.v-hero-badge-card:hover {
  transform: translateY(-3px);
  background: rgba(18, 173, 168, 0.15);
  border-color: rgba(18, 173, 168, 0.5);
  box-shadow: 0 8px 24px rgba(18, 173, 168, 0.2);
}

/* 2. FILTER NAV PILLS */
.archive-filter-nav {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 12px 0 !important;
  position: sticky !important;
  top: 70px !important;
  z-index: 999 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
.filter-nav-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.filter-scroll-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 4px 0 !important;
}
.filter-scroll-wrapper::-webkit-scrollbar {
  display: none !important;
}
.hero-category-chips .filter-pill,
.filter-scroll-wrapper .filter-pill,
.archive-filter-nav .filter-pill,
.filter-pill {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em !important;
  padding: 8px 20px !important;
  border-radius: 50px !important;
  border: 1.5px solid #CBD5E1 !important;
  background: #FFFFFF !important;
  color: #334155 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  outline: none !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 6px rgba(15, 45, 82, 0.04) !important;
}

.hero-category-chips .filter-pill:hover,
.filter-scroll-wrapper .filter-pill:hover,
.archive-filter-nav .filter-pill:hover,
.filter-pill:hover {
  border: 1.5px solid #12ADA8 !important;
  color: #0C8B87 !important;
  background: rgba(18, 173, 168, 0.05) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.18) !important;
}

.hero-category-chips .filter-pill.active,
.filter-scroll-wrapper .filter-pill.active,
.archive-filter-nav .filter-pill.active,
.filter-pill.active,
.filter-pill[aria-current="page"] {
  background: linear-gradient(135deg, #0B2545 0%, #12ADA8 100%) !important;
  border: 1.5px solid #12ADA8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(18, 173, 168, 0.35) !important;
}

/* 3. SECTIONS & LAYOUT */
.v-main-container {
  padding-top: 50px;
  padding-bottom: 80px;
}
.v-section {
  margin-bottom: 64px;
}
.v-section-head {
  margin-bottom: 36px;
}
.v-section-title {
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 800;
  color: #0B2545;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 14px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.v-section-desc {
  font-size: 16.5px;
  color: #475569;
  max-width: 800px;
  line-height: 1.7;
  margin: 0 0 16px;
}

/* 4. GRIDS & CARDS */
.v-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.v-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.v-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.v-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(11, 37, 69, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.v-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(11, 37, 69, 0.09);
  border-color: rgba(18, 173, 168, 0.4);
}
.v-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #0B2545;
  margin-bottom: 12px;
  font-family: 'Poppins', sans-serif;
}
.v-card-text {
  font-size: 14.5px;
  color: #64748B;
  line-height: 1.65;
  margin: 0;
}

/* Alert Card Variant */
.v-card-alert {
  border-left: 4px solid #EF4444;
  background: linear-gradient(180deg, #FFFFFF 0%, #FEF2F2 100%);
}
.v-card-alert .v-card-title {
  color: #991B1B;
}

/* 5. EXECUTIVE FRAMEWORK BOX */
.exec-framework-box {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 20px;
  padding: 36px;
  color: #FFFFFF;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16);
  margin: 36px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.exec-framework-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.exec-framework-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF !important;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}
.exec-framework-tag {
  background: rgba(18, 173, 168, 0.2);
  border: 1px solid rgba(18, 173, 168, 0.4);
  color: #A2E8F6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 50px;
}
.exec-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.exec-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 22px;
  transition: all 0.3s ease;
}
.exec-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(18, 173, 168, 0.4);
  transform: translateY(-3px);
}
.exec-card-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.exec-card-heading {
  font-size: 15.5px;
  font-weight: 700;
  color: #F8FAFC;
  margin-bottom: 8px;
}
.exec-card-text {
  font-size: 13.5px;
  color: #CBD5E1;
  line-height: 1.6;
  margin: 0;
}
.exec-card-solution {
  background: linear-gradient(135deg, rgba(18, 173, 168, 0.25) 0%, rgba(10, 78, 107, 0.3) 100%);
  border-color: rgba(18, 173, 168, 0.5);
}

/* 6. STEP CARDS & WORKFLOW */
.v-workflow-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 40px;
}
.v-step-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 24px;
  position: relative;
  box-shadow: 0 4px 14px rgba(11, 37, 69, 0.03);
  transition: all 0.3s ease;
}
.v-step-card:hover {
  transform: translateY(-4px);
  border-color: #12ADA8;
  box-shadow: 0 12px 28px rgba(18, 173, 168, 0.12);
}
.v-step-num {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #12ADA8, #0B2545);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.v-step-title {
  font-size: 16.5px;
  font-weight: 700;
  color: #0B2545;
  margin-bottom: 10px;
  font-family: 'Poppins', sans-serif;
}
.v-step-desc {
  font-size: 14px;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}

/* 7. RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
  .v-grid-3, .exec-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .v-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .v-product-hero {
    padding: 60px 0 50px;
  }
  .v-grid-3, .v-grid-2, .v-grid-4, .exec-card-grid {
    grid-template-columns: 1fr;
  }
  .exec-framework-box {
    padding: 24px;
  }
  .v-workflow-box {
    padding: 24px;
  }
}


/* ==========================================================================
   GLOBAL HEADER \u2014 Veridex-Style White Sticky Header (All Pages)
   Forces the same white/glassmorphic sticky header across every page.
   Placed at end of file to guarantee cascade priority.
   ========================================================================== */
header.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(11, 37, 69, 0.05) !important;
  transition: box-shadow 0.3s ease !important;
}

header.site-header .header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 24px !important;
  max-width: var(--maxw) !important;
  margin: 0 auto !important;
  position: relative !important;
}

/* Logo: Dark text on white header */
header.site-header .logo {
  color: var(--navy) !important;
}
header.site-header .logo .brand-text {
  color: var(--navy) !important;
}
header.site-header .logo .brand-hl {
  color: var(--teal) !important;
}
header.site-header .logo .mark {
  background: linear-gradient(135deg, var(--navy), var(--teal)) !important;
  box-shadow: 0 4px 12px rgba(18, 173, 168, 0.32) !important;
}

/* Nav links: Dark text on white header with Dynamic Gradient Pill & Bottom Glow Indicator */
header.site-header nav.main-nav>ul>li>a {
  color: var(--navy) !important;
  padding: 7px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

header.site-header nav.main-nav>ul>li>a:hover,
header.site-header nav.main-nav>ul>li.has-dropdown:hover>a,
header.site-header nav.main-nav>ul>li.has-dropdown.is-hovered>a,
header.site-header nav.main-nav>ul>li.has-dropdown.open>a {
  color: #0c8b87 !important;
  background: rgba(18, 173, 168, 0.07) !important;
  border-bottom: 2px solid rgba(18, 173, 168, 0.4) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Active Nav State: Gradient Pill + Glowing Bottom Line */
header.site-header nav.main-nav>ul>li>a.active,
header.site-header nav.main-nav>ul>li.has-dropdown>a.active,
header.site-header nav.main-nav>ul>li.has-dropdown>a.dropdown-trigger.active {
  color: #075e5a !important;
  background: linear-gradient(135deg, rgba(18, 173, 168, 0.18), rgba(10, 78, 107, 0.08)) !important;
  border: 1px solid rgba(18, 173, 168, 0.25) !important;
  border-bottom: 3.5px solid #12ADA8 !important;
  box-shadow: 0 4px 16px rgba(18, 173, 168, 0.28), 0 2px 8px rgba(18, 173, 168, 0.18) !important;
  font-weight: 700 !important;
  transform: translateY(-1px) !important;
}


/* Search box: Light bg on white header */
header.site-header .header-search .search-box {
  background: var(--bg-light) !important;
  border: 1px solid var(--border) !important;
}
header.site-header .header-search input {
  color: var(--navy) !important;
}
header.site-header .header-search button {
  background: var(--navy) !important;
  color: var(--white) !important;
}
header.site-header .header-search button:hover {
  background: var(--teal) !important;
}

/* Menu toggle: Dark icon on white header */
header.site-header .menu-toggle {
  color: var(--navy) !important;
}

/* Enhanced Dropdown Menu Animation & Styling */
header.site-header .dropdown-menu {
  display: none !important;
  animation: dtlDropdownEntrance 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  box-shadow: 0 16px 40px rgba(11, 37, 69, 0.16), 0 4px 14px rgba(18, 173, 168, 0.12) !important;
  border-top: 3px solid #12ADA8 !important;
  border-radius: 0 0 12px 12px !important;
}

header.site-header nav.main-nav ul li.has-dropdown:hover > .dropdown-menu,
header.site-header nav.main-nav ul li.has-dropdown.is-hovered > .dropdown-menu,
header.site-header nav.main-nav ul li.has-dropdown.open > .dropdown-menu {
  display: flex !important;
}

@keyframes dtlDropdownEntrance {
  from { opacity: 0; transform: translate(-50%, 8px) scale(0.97); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

header.site-header .dropdown-menu li a {
  transition: all 0.2s ease !important;
  border-left: 3px solid transparent !important;
}

header.site-header .dropdown-menu li a:hover,
header.site-header .dropdown-menu li a.active {
  background: rgba(18, 173, 168, 0.1) !important;
  color: #0c8b87 !important;
  border-left: 3px solid #12ADA8 !important;
  padding-left: 20px !important;
}

/* ==========================================================================
   Post Bottom Components: Related Tool Card & 4 Related Posts
   ========================================================================== */

.post-related-tool-section {
  margin: 48px 0 36px;
  width: 100%;
}

.related-tool-showcase-card {
  background: #FFFFFF;
  border: 1px solid rgba(18, 173, 168, 0.22);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(11, 37, 69, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
}

.related-tool-showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(11, 37, 69, 0.12), 0 4px 18px rgba(18, 173, 168, 0.15);
  border-color: rgba(18, 173, 168, 0.45);
}

.related-tool-showcase-card::before {
  content: '';
  display: block;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #12ADA8 0%, #0B2545 100%);
}

.related-tool-inner {
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
}

.related-tool-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.related-tool-badge-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.related-tool-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0B2545 0%, #12ADA8 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(18, 173, 168, 0.25);
  flex-shrink: 0;
}

.related-tool-meta-labels {
  display: flex;
  flex-direction: column;
}

.related-tool-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--teal-dark);
}

.related-tool-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy);
  margin: 2px 0 0 0;
  line-height: 1.25;
}

.related-tool-privacy-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #0C8B87;
  background: rgba(18, 173, 168, 0.1);
  border: 1px solid rgba(18, 173, 168, 0.25);
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.related-tool-desc {
  font-size: 0.96rem;
  color: var(--gray);
  line-height: 1.65;
  margin: 0 0 20px 0;
}

.related-tool-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.related-tool-tag {
  font-size: 12px;
  font-weight: 600;
  color: #0B2545;
  background: #F0F4FF;
  border: 1px solid #D0D8F0;
  padding: 5px 13px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.related-tool-tag:hover {
  background: #E4ECFF;
  border-color: #BACBEE;
}

.related-tool-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #E2E8F0;
  padding-top: 20px;
  margin-top: 4px;
  flex-wrap: wrap;
  gap: 14px;
}

.btn-launch-related-tool {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal-dark) 100%);
  color: var(--white);
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(11, 37, 69, 0.2);
}

.btn-launch-related-tool:hover {
  background: linear-gradient(135deg, var(--teal-dark) 0%, var(--navy) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(18, 173, 168, 0.35);
  color: var(--white);
}

/* Related Posts Section */
.post-related-posts-section {
  margin: 40px 0 48px;
  padding-top: 36px;
  border-top: 1px solid #E2E8F0;
  width: 100%;
}

.related-posts-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.related-posts-header .eyebrow {
  margin-bottom: 4px;
}

.related-posts-title-box h3 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--navy);
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1024px) {
  .related-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .related-posts-grid {
    grid-template-columns: 1fr;
  }
  .related-tool-inner {
    padding: 22px 20px;
  }
  .related-tool-top-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.related-post-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.related-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(11, 37, 69, 0.09);
  border-color: var(--teal);
}

.related-post-card-cat {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--teal-dark);
  background: rgba(18, 173, 168, 0.09);
  border: 1px solid rgba(18, 173, 168, 0.2);
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 12px;
  align-self: flex-start;
}

.related-post-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.related-post-card:hover .related-post-card-title {
  color: var(--teal-dark);
}

.related-post-card-excerpt {
  font-size: 0.86rem;
  color: var(--gray);
  line-height: 1.55;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.related-post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px dashed #E2E8F0;
  font-size: 0.8rem;
  color: var(--gray);
  margin-top: auto;
}

.related-post-card-link {
  color: var(--teal-dark);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}