/*
Theme Name: Multipurpose-Theme
Theme URI: https://revolutionaryplugins.com/multipurpose-theme
Author: Revolutionary Plugins
Author URI: https://revolutionaryplugins.com
Description: A flexible multipurpose WordPress theme for any kind of business site. Built around Revolutionary Blocks with the full Revolutionary theme dashboard, demo importer and licensed updates.
Version: 1.33.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: revdash
Tags: technology, it-company, business, corporate, full-width-template, custom-header, custom-menu, custom-logo, featured-images, threaded-comments, rtl-language-support, translation-ready
*/

/* ==========================================================================
   BASE RESET & ROOT VARIABLES
   ========================================================================== */
:root {
    --dash-primary:       #0a66c2;
    --dash-primary-dark:  #0052a3;
    --dash-primary-light: #3d8fe0;
    --dash-secondary:     #00c8a0;
    --dash-dark:          #0d1b2a;
    --dash-dark-alt:      #162032;
    --dash-light:         #f7f9fc;
    --dash-text:          #1f2937;
    --dash-gray:          #6b7280;
    --dash-gray-light:    #f3f4f6;
    --dash-white:         #ffffff;
    --dash-border:        #e5e7eb;
    --dash-heading-font:  'Inter', 'Segoe UI', sans-serif;
    --dash-body-font:     'Inter', 'Segoe UI', sans-serif;
    --dash-mono-font:     'JetBrains Mono', 'Courier New', monospace;
    --dash-radius:        8px;
    --dash-radius-lg:     16px;
    --dash-shadow:        0 4px 24px rgba(10, 102, 194, 0.10);
    --dash-shadow-lg:     0 8px 48px rgba(10, 102, 194, 0.18);
    --dash-transition:    all 0.3s ease;
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--dash-body-font);
    color: var(--dash-dark);
    background: var(--dash-white);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--dash-heading-font);
    font-weight: 700;
    line-height: 1.2;
    color: var(--dash-dark);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin-bottom: 1rem; }
a { color: var(--dash-primary); text-decoration: none; transition: var(--dash-transition); }
a:hover { color: var(--dash-primary-dark); }

strong, b { font-weight: 700; }
em, i { font-style: italic; }
code { font-family: var(--dash-mono-font); background: var(--dash-gray-light); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
blockquote { border-left: 4px solid var(--dash-primary); padding: 1rem 1.5rem; margin: 1.5rem 0; background: var(--dash-gray-light); border-radius: 0 var(--dash-radius) var(--dash-radius) 0; }

img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }
li { margin-bottom: 0.25rem; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-wide {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section-padding { padding: 5rem 0; }
.section-padding-sm { padding: 3rem 0; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* em padding keeps the button proportionate to its label (revdash_button
       fx overrides this with the CTA size on the front end). */
    padding: 0.65em 1.5em;
    border-radius: var(--dash-btn-radius, var(--dash-radius));
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--dash-transition);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

/* The theme's primary button CONSUMES the suite-wide --rev-btn-* contract (the
   same tokens the dashboard CTA button publishes), so it tracks the dashboard
   CTA button automatically. Shape/size/animation/fill still come from
   revdash_button_fx_css() + the CTA fill emission; these handle the colors so
   the resting + hover fill and text color match the CTA. Old values are kept as
   var() fallbacks for contexts where the contract isn't emitted. (Per the
   mandatory button-token contract, never hardcode a primary button color.) */
.btn-primary {
    background: var(--rev-btn-bg, var(--dash-primary));
    color: var(--rev-btn-color, var(--dash-white));
    border-color: var(--rev-btn-bg, var(--dash-primary));
}
/* Hover motion (lift/grow/etc.) is applied by revdash_button_fx_css() from the
   CTA animation set, so buttons move ONLY when an animation is selected, no
   baked-in lift here, which would otherwise lift unconditionally. */
.btn-primary:hover {
    background: var(--rev-btn-bg-hover, var(--dash-btn-hover, var(--dash-primary-dark)));
    border-color: var(--rev-btn-bg-hover, var(--dash-btn-hover, var(--dash-primary-dark)));
    color: var(--rev-btn-color, var(--dash-white));
}

.btn-secondary {
    background: var(--dash-secondary);
    color: var(--dash-dark);
    border-color: var(--dash-secondary);
}
.btn-secondary:hover {
    background: #00a882;
    border-color: #00a882;
    color: var(--dash-white);
}

.btn-outline {
    background: transparent;
    color: var(--dash-primary);
    border-color: var(--dash-primary);
}
.btn-outline:hover {
    background: var(--dash-primary);
    color: var(--dash-white);
}

.btn-outline-white {
    background: transparent;
    color: var(--dash-white);
    border-color: rgba(255,255,255,0.6);
}
.btn-outline-white:hover {
    background: var(--dash-white);
    color: var(--dash-primary);
    border-color: var(--dash-white);
}

.btn-lg { padding: 0.8em 1.85em; font-size: 1.05rem; }
.btn-sm { padding: 0.5em 1.2em; font-size: 0.85rem; }

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
#dash-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: transparent;
    transition: var(--dash-transition);
}

/* Header foreground (nav text, hamburger bars, text logo), one variable set
   per state, driven by the dashboard Header-colors settings. Solid by default
   and after scroll; the transparent-state color while floating over the hero. */
#dash-header {
    --dash-hdr-fg: var(--dash-header-fg-solid, var(--dash-dark, #0d1b2a));
    --dash-hdr-fg-hover: var(--dash-header-fg-solid-hover, var(--dash-primary, #0a66c2));
}
#dash-header.header-transparent:not(.scrolled) {
    --dash-hdr-fg: var(--dash-header-fg-trans, #ffffff);
    --dash-hdr-fg-hover: var(--dash-header-fg-trans-hover, #ffffff);
}
/* Menu font follows the dashboard's Header tab setting; inherits otherwise. */
.primary-nav > li > a,
.header-right-nav > li > a { font-family: var(--dash-header-font, inherit); }

#dash-header.scrolled {
    /* Scrolled IS the solid state, so it takes the configured solid background
       and foreground. Both keep the previous dark default, so a site that
       never set them looks exactly as it did; a site that sets a white header
       background gets dark text instead of white-on-white. */
    background: var(--dash-header-bg, rgba(13, 27, 42, 0.97));
    --dash-hdr-fg: var(--dash-header-fg-solid, #ffffff);
    --dash-hdr-fg-hover: var(--dash-header-fg-solid-hover, #ffffff);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

#dash-header.header-light {
    background: var(--dash-header-bg, var(--dash-white));
    border-bottom: 1px solid var(--dash-border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* Every header region centres on one axis: the site name, the menu and the
   CTA. The <nav> around the primary menu is taller than the menu itself, and
   without this the list sits at the wrapper's top edge and the menu rides
   about ten pixels above the other two. */
.header-inner > nav { display: flex; align-items: center; }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
    padding-top: var(--dash-header-pad-top, var(--dash-header-pad-y, 0px));
    padding-bottom: var(--dash-header-pad-bottom, var(--dash-header-pad-y, 0px));
    gap: 2rem;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    text-decoration: none;
}

.site-logo img {
    /* Use a fixed height (not max-height) so the default and light logo
       variants render at the SAME size regardless of each file's intrinsic
       dimensions, otherwise the smaller file looks smaller (e.g. the light
       logo on the transparent home hero). width:auto keeps the aspect ratio. */
    height: var(--dash-logo-max-height, 48px);
    max-height: none;
    width: auto;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-name {
    font-size: 1.3rem;
    font-weight: 800;
    /* Follows the header state. Was hard-coded white, which is invisible on a
       transparent header floating over a light hero. */
    color: var(--dash-hdr-fg, var(--dash-white));
    letter-spacing: -0.5px;
}

.logo-tagline {
    font-size: 0.65rem;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

#dash-header.header-light .logo-name { color: var(--dash-hdr-fg); }
#dash-header.header-light .logo-tagline { color: var(--dash-gray); }

/* Primary Nav, stretch items to full header height so there's no dead zone
   above/below the links (which would break hover when crossing to the dropdown). */
.primary-nav {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    height: 100%;
    /* The browser's default list margin was only half reset: a 16px bottom
       margin survived, which made the wrapping <nav> 16px taller than the menu
       and left the menu sitting 8px above the site name and the CTA button. */
    margin: 0;
    padding-left: 0;
    padding-top: var(--dash-menu-pad-top, 0px);
}

.primary-nav > li {
    list-style: none;
    position: relative;
    display: flex;
    align-items: center;
}

.primary-nav > li > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--dash-menu-pad-x, 0.9rem);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--dash-hdr-fg, rgba(255,255,255,0.88));
    border-radius: 6px;
    transition: var(--dash-transition);
    white-space: nowrap;
}

.primary-nav > li > a:hover,
.primary-nav > li.current-menu-item > a,
.primary-nav > li.current-menu-ancestor > a {
    color: var(--dash-hdr-fg-hover, var(--dash-white));
    background: rgba(127,127,127,0.12);
}

#dash-header.header-light .primary-nav > li > a { color: var(--dash-hdr-fg); }
#dash-header.header-light .primary-nav > li > a:hover { background: var(--dash-gray-light); color: var(--dash-hdr-fg-hover); }

/* Dropdown */
.primary-nav > li.menu-item-has-children { position: relative; }

/* Submenu sits IMMEDIATELY below the menu item (which now fills the full header
   height, see .primary-nav > li above). No gap to cross. */
.primary-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--dash-white);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    box-shadow: var(--dash-shadow-lg);
    padding: 0.5rem;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    z-index: 9999;
}

.primary-nav > li:hover > .sub-menu,
.primary-nav > li:focus-within > .sub-menu,
.primary-nav .sub-menu:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

.primary-nav .sub-menu li a {
    display: block;
    padding: 0.6rem 1rem;
    color: var(--dash-dark);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 6px;
    transition: var(--dash-transition);
}

.primary-nav .sub-menu li a:hover {
    background: var(--dash-gray-light);
    color: var(--dash-primary);
    padding-left: 1.25rem;
}

/* Header, Right side nav */
#header-right-nav { flex-shrink: 0; }
.header-right-nav {
    display: flex; align-items: center; gap: 0.1rem;
    list-style: none; margin: 0; padding: 0;
}
.header-right-nav > li { list-style: none; position: relative; }
.header-right-nav > li > a {
    display: block;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dash-hdr-fg, rgba(255,255,255,0.85));
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}
.header-right-nav > li > a:hover,
.header-right-nav > li.current-menu-item > a {
    color: var(--dash-white);
    background: rgba(255,255,255,0.08);
}
#dash-header.header-light .header-right-nav > li > a { color: var(--dash-hdr-fg); }
#dash-header.header-light .header-right-nav > li > a:hover,
#dash-header.header-light .header-right-nav > li.current-menu-item > a {
    color: var(--dash-primary); background: var(--dash-gray-light);
}

/* Mobile right-nav (within mobile-nav drawer) */
.mobile-right-nav {
    list-style: none; margin: 1.25rem 0 0; padding: 1rem 0 0;
    border-top: 1px solid var(--dash-border);
}
.mobile-right-nav li { padding: 0.5rem 0; }
.mobile-right-nav a {
    color: var(--dash-muted); font-size: 0.9rem; text-decoration: none; font-weight: 500;
}
.mobile-right-nav a:hover { color: var(--dash-primary); }

@media (max-width: 1024px) {
    #header-right-nav { display: none; }
}

/* Header, logo image variants */
.site-logo-img { display: block; height: var(--dash-logo-max-height, 48px); max-height: none; width: auto; }
/* Footer logo gets its OWN size control. The footer img sits inside an
   <a class="site-logo">, so the generic `.site-logo img` rule above (specificity
   0,1,1) would otherwise out-rank a plain `.site-footer-logo` (0,1,0) and force
   the footer logo to the HEADER height, making the footer size control do
   nothing. Scoping under .site-logo (0,2,0) wins, so the footer variable
   actually drives the size. */
.site-logo .site-footer-logo {
    height: var(--dash-footer-logo-max-height, var(--dash-logo-max-height, 48px));
    max-height: none;
    width: auto;
}
.site-logo-light { display: none; }
/* Swap to the light logo on the transparent hero ONLY when the dashboard's
   "Logo on transparent header" is set to Light (header.php adds
   .header-trans-logo-light). Otherwise the default (dark) logo stays, same
   image, same size as every other page. */
#dash-header.header-transparent.header-trans-logo-light:not(.scrolled) .site-logo-default { display: none; }
#dash-header.header-transparent.header-trans-logo-light:not(.scrolled) .site-logo-light   { display: block; }

/* While the header is transparent (over the hero), the logo can use its OWN
   height, independent of the standard/scrolled header. Lets a light-logo file
   whose artwork sits smaller in its canvas be sized up to visually match the
   default logo. Falls back to the normal logo height when unset. Higher
   specificity than `.site-logo img`, so it wins only in the transparent state. */
#dash-header.header-transparent:not(.scrolled) .site-logo-img {
    height: var(--dash-trans-logo-max-height, var(--dash-logo-max-height, 48px));
}

/* Announcement banner, thin bar above the header (Header tab → Announcement
   banner). Background / text color / font are set inline from the dashboard;
   these are the fallbacks used when those fields are left blank. */
.dash-banner {
    position: relative;
    z-index: 10001; /* above #dash-header (9999) so it's never hidden behind it */
    background: var(--dash-primary, #0a66c2);
    color: #fff;
    text-align: center;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}
.dash-banner-text { display: inline-block; }
@media (max-width: 600px) { .dash-banner { font-size: 13px; padding: 8px 14px; } }

/* Custom (Revolutionary Blocks) banner, the RB document brings its own
   sections, backgrounds and spacing, so strip the text-bar cosmetics and let
   the document paint the bar edge-to-edge. Keeps .dash-banner's z-index so it
   still sits above the sticky header. */
.dash-banner--custom {
    background: none;
    color: inherit;
    text-align: initial;
    padding: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: inherit;
}

/* Header, TRANSPARENT mode */
#dash-header.header-transparent {
    background: transparent;
    box-shadow: none;
    border-bottom: 0;
}
#dash-header.header-transparent .primary-nav > li > a,
#dash-header.header-transparent .header-right-nav > li > a {
    color: var(--dash-hdr-fg);
}
#dash-header.header-transparent .primary-nav > li > a:hover,
#dash-header.header-transparent .header-right-nav > li > a:hover { color: var(--dash-hdr-fg-hover); background: rgba(255,255,255,0.08); }

/* When user scrolls past hero, transparent header becomes solid */
#dash-header.header-transparent.scrolled {
    background: var(--dash-header-bg, var(--dash-white));
    box-shadow: 0 4px 18px rgba(13,27,42,.07);
    border-bottom: 1px solid var(--dash-border);
}
#dash-header.header-transparent.scrolled .primary-nav > li > a,
#dash-header.header-transparent.scrolled .header-right-nav > li > a {
    color: var(--dash-hdr-fg);
}
#dash-header.header-transparent.scrolled .primary-nav > li > a:hover,
#dash-header.header-transparent.scrolled .header-right-nav > li > a:hover {
    color: var(--dash-hdr-fg-hover); background: var(--dash-gray-light);
}

/* Header, STICKY */
#dash-header.header-sticky { position: sticky; top: 0; z-index: 9999; }

/* Home page: the Revolutionary Slider injects its hero at the very top of the
   body (via wp_body_open, before the header). Make the header FIXED here so it
   floats OVER the slider (transparent overlay) instead of a sticky bar that
   falls below the slider. Higher specificity than the sticky/custom rules so it
   wins on the home page only; other pages keep sticky. z-index (9999) already
   beats the slider (≤20). */
body.home #dash-header { position: fixed; top: 0; left: 0; right: 0; }

/* Header, CUSTOM (Revolutionary Blocks): a solid sticky bar pinned to the top
   with the page content (incl. the slider) below it, never the transparent
   hero overlay. Dark default background so light RB logos/menus stay visible
   (override via the Header background fill). */
#dash-header.header-layout-custom {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--dash-header-bg, var(--dash-dark, #0d1b2a));
}
#dash-header.header-layout-custom .dash-custom-header { width: 100%; }
#dash-header.header-layout-custom .rb-document { width: 100%; }

/* Header, OVERLAY mode (hamburger menu at all sizes) */
#dash-header.header-overlay-mode #primary-nav,
#dash-header.header-overlay-mode .header-widgets,
#dash-header.header-overlay-mode #header-right-nav { display: none !important; }

/* Header widget slot */
.header-widgets {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.header-widgets .widget { margin: 0; }
.header-widgets .widget-title { display: none; }
.header-widgets .dash-widget-social,
.header-widgets .footer-social { display: flex; gap: 0.5rem; }
.header-widgets .social-link {
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}
@media (max-width: 1024px) {
    .header-widgets { display: none; }
}
#dash-header.header-overlay-mode .menu-toggle { display: flex !important; }
#dash-header.header-overlay-mode.header-transparent .menu-toggle span { background: var(--dash-hdr-fg); }

/* ==========================================================================
   HEADER LAYOUTS (desktop ≥1025px, below that all layouts collapse to the
   mobile hamburger via the responsive block lower in this file)
   ========================================================================== */
@media (min-width: 1025px) {

    /* CENTER, logo left, primary nav absolutely centered over the header,
       right-nav + CTA on the right. */
    #dash-header.header-layout-center .header-inner { position: relative; }
    #dash-header.header-layout-center #primary-nav {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }

    /* RIGHT, logo left, then nav + right-nav + CTA pushed to the right edge. */
    #dash-header.header-layout-right #primary-nav { margin-left: auto; }

    /* STACKED, logo centered on the first row, primary nav centered on the
       second row, CTA pinned to the right and vertically centered. The
       optional secondary right-nav is hidden here to keep the stack to two
       clean rows. */
    #dash-header.header-layout-stacked .header-inner {
        flex-direction: column;
        height: auto;
        min-height: 80px;
        padding: 0.85rem 0;
        gap: 0.55rem;
        justify-content: center;
        position: relative;
    }
    #dash-header.header-layout-stacked .site-logo { margin: 0 auto; }
    #dash-header.header-layout-stacked #primary-nav { margin: 0 auto; }
    #dash-header.header-layout-stacked .primary-nav { justify-content: center; }
    #dash-header.header-layout-stacked #header-right-nav { display: none; }
    #dash-header.header-layout-stacked .header-cta {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}

body.nav-open { overflow: hidden; }

/* Mobile Nav, UPGRADE to fullscreen overlay when triggered */
.mobile-nav {
    /* Override default dropdown, go fullscreen overlay */
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Default: transparent (frosted) so the page shows through.
       Opt into a solid background on the Header tab. */
    background: rgba(13, 27, 42, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 80px 32px 48px;
    z-index: 9998;
    overflow-y: auto;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
    display: block !important;
    visibility: hidden;
}
.mobile-nav.active { transform: translateY(0); opacity: 1; visibility: visible; }
/* Optional solid overlay background (toggle on the Header tab).
   Doubled class = higher specificity so it wins regardless of source order. */
.mobile-nav.mobile-nav--solid {
    background: linear-gradient(135deg, #0d1b2a 0%, #162032 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mobile-nav > ul {
    max-width: 720px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}
.mobile-nav > ul > li > a {
    display: block;
    padding: 18px 0;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
    transition: color .15s ease, padding-left .25s ease;
}
.mobile-nav > ul > li > a:hover { color: var(--dash-secondary); padding-left: 12px; }
.mobile-nav .sub-menu {
    list-style: none;
    padding: 8px 0 12px 16px;
    margin: 0;
}
.mobile-nav .sub-menu li a {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    padding: 8px 0;
    display: block;
    text-decoration: none;
}
.mobile-nav .sub-menu li a:hover { color: var(--dash-primary-light); }
.mobile-right-nav {
    list-style: none;
    margin: 32px auto 0;
    padding: 24px 0 0;
    max-width: 720px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.mobile-right-nav li a {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 500;
}
.mobile-right-nav li a:hover { color: #fff; }

/* Hamburger spans go light on overlay-open or transparent state */
body.nav-open .menu-toggle span { background: #fff; }

/* Header CTA */
.header-cta { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
#dash-header.header-overlay-mode .header-cta { display: none; }
@media (min-width: 1025px) {
    #dash-header.header-overlay-mode .header-cta { display: flex; }
}

/* Hamburger */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    background: none;
    border: none;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--dash-white);
    border-radius: 2px;
    transition: var(--dash-transition);
}

#dash-header.header-light .menu-toggle span { background: var(--dash-hdr-fg); }

.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
.mobile-nav {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    /* Transparent (frosted) by default, matches the overlay rule above.
       Use the Header tab "Solid overlay background" toggle for a solid fill. */
    background: rgba(13, 27, 42, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 1.5rem;
    z-index: 9998;
    border-top: 1px solid rgba(255,255,255,0.1);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.mobile-nav.active { display: block; }

.mobile-nav ul { list-style: none; padding: 0; }
.mobile-nav ul li a {
    display: block;
    padding: 0.8rem 0;
    color: rgba(255,255,255,0.9);
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-nav ul li a:hover { color: var(--dash-secondary); }
.mobile-nav .sub-menu { padding-left: 1rem; }
.mobile-nav .sub-menu li a { font-size: 0.9rem; color: rgba(255,255,255,0.7); }

/* ==========================================================================
   HERO
   ========================================================================== */
.dash-hero-fallback {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--dash-dark) 0%, var(--dash-dark-alt) 50%, #0a2540 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 120px 0 80px;
}

.dash-hero-fallback::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 70% 50%, rgba(10, 102, 194, 0.25) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 20% 80%, rgba(0, 200, 160, 0.15) 0%, transparent 60%);
}

.dash-hero-fallback::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

.hero-content-wrap {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(10, 102, 194, 0.2);
    border: 1px solid rgba(10, 102, 194, 0.4);
    color: var(--dash-secondary);
    padding: 0.35rem 1rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.hero-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--dash-secondary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    color: var(--dash-white);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
}

.hero-title .highlight {
    background: linear-gradient(135deg, var(--dash-primary-light), var(--dash-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 2.5rem;
    line-height: 1.8;
    max-width: 560px;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }

.hero-stats {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.hero-stat-item { text-align: left; }
.hero-stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dash-white);
    line-height: 1;
    display: block;
}
.hero-stat-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.25rem;
    display: block;
}

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */
.section-header { margin-bottom: 3.5rem; }
.section-header.center { text-align: center; }

.section-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--dash-primary);
    margin-bottom: 0.75rem;
    position: relative;
    padding-left: 1.5rem;
}

.section-tag::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 2px;
    background: var(--dash-primary);
}

.section-header.center .section-tag { padding-left: 0; }
.section-header.center .section-tag::before { display: none; }

.section-title {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 800;
    color: var(--dash-dark);
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.section-title .accent { color: var(--dash-primary); }

.section-subtitle {
    font-size: 1.05rem;
    color: var(--dash-gray);
    max-width: 580px;
    line-height: 1.8;
}

.section-header.center .section-subtitle { margin: 0 auto; }

/* ==========================================================================
   SERVICE CARDS
   ========================================================================== */
.services-section { background: var(--dash-white); }

.service-card {
    background: var(--dash-white);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    padding: 2rem;
    transition: var(--dash-transition);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dash-primary), var(--dash-secondary));
    transform: scaleX(0);
    transition: var(--dash-transition);
}

.service-card:hover {
    border-color: transparent;
    box-shadow: var(--dash-shadow-lg);
    transform: translateY(-6px);
}

.service-card:hover::before { transform: scaleX(1); }

.service-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(10, 102, 194, 0.1), rgba(0, 200, 160, 0.1));
    border-radius: var(--dash-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
    color: var(--dash-primary);
    transition: var(--dash-transition);
}

.service-card:hover .service-icon {
    background: var(--dash-primary);
    color: var(--dash-white);
}

.service-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--dash-dark);
}

.service-desc {
    font-size: 0.92rem;
    color: var(--dash-gray);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.service-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dash-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--dash-transition);
}

.service-link::after {
    content: '→';
    transition: var(--dash-transition);
}

.service-link:hover { color: var(--dash-primary-dark); }
.service-link:hover::after { transform: translateX(4px); }

/* ==========================================================================
   WHY CHOOSE US / FEATURES
   ========================================================================== */
.features-section {
    background: linear-gradient(135deg, var(--dash-dark) 0%, var(--dash-dark-alt) 100%);
    color: var(--dash-white);
    position: relative;
    overflow: hidden;
}

.features-section::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(10, 102, 194, 0.15), transparent 70%);
    pointer-events: none;
}

.features-section .section-title { color: var(--dash-white); }
.features-section .section-subtitle { color: rgba(255,255,255,0.65); }

.feature-item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.5rem;
    border-radius: var(--dash-radius-lg);
    transition: var(--dash-transition);
}

.feature-item:hover { background: rgba(255,255,255,0.05); }

.feature-icon-wrap {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary));
    border-radius: var(--dash-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--dash-white);
    flex-shrink: 0;
}

.feature-content h4 { color: var(--dash-white); margin-bottom: 0.5rem; font-size: 1.05rem; }
.feature-content p { color: rgba(255,255,255,0.6); font-size: 0.9rem; line-height: 1.65; margin: 0; }

/* ==========================================================================
   PROCESS / HOW IT WORKS
   ========================================================================== */
.process-section { background: var(--dash-gray-light); }

.process-steps { display: flex; flex-direction: column; gap: 0; }

.process-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 2rem 0;
    border-bottom: 1px solid var(--dash-border);
    position: relative;
}

.process-step:last-child { border-bottom: none; }

.step-number {
    width: 56px;
    height: 56px;
    background: var(--dash-primary);
    color: var(--dash-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.process-step:not(:last-child) .step-number::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% + 2rem + 1px);
    background: linear-gradient(to bottom, var(--dash-primary), var(--dash-border));
    z-index: 0;
}

.step-content h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.step-content p { font-size: 0.92rem; color: var(--dash-gray); margin: 0; line-height: 1.7; }

/* ==========================================================================
   STATS / COUNTER STRIP
   ========================================================================== */
.stats-strip {
    background: linear-gradient(135deg, var(--dash-primary) 0%, var(--dash-primary-dark) 100%);
    padding: 3.5rem 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

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

.stat-item {}

.stat-number {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--dash-white);
    line-height: 1;
    display: block;
}

.stat-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.5rem;
    display: block;
}

.stat-divider {
    width: 32px;
    height: 2px;
    background: rgba(255,255,255,0.3);
    margin: 0.75rem auto 0;
    border-radius: 2px;
}

/* ==========================================================================
   TECHNOLOGY STACK
   ========================================================================== */
.tech-stack-section { background: var(--dash-white); }

.tech-logos-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    align-items: center;
}

@media (max-width: 1024px) { .tech-logos-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .tech-logos-grid { grid-template-columns: repeat(3, 1fr); } }

.tech-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    transition: var(--dash-transition);
    text-align: center;
}

.tech-logo-item:hover {
    border-color: var(--dash-primary);
    box-shadow: var(--dash-shadow);
    transform: translateY(-3px);
}

.tech-logo-item .tech-icon {
    font-size: 2rem;
    color: var(--dash-gray);
    transition: var(--dash-transition);
}
.tech-logo-item:hover .tech-icon { color: var(--dash-primary); }

.tech-logo-item span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dash-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials-section { background: var(--dash-gray-light); }

.testimonial-card {
    background: var(--dash-white);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    padding: 2rem;
    transition: var(--dash-transition);
}

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

.testimonial-stars {
    color: #f59e0b;
    font-size: 1rem;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.testimonial-text {
    font-size: 0.95rem;
    color: var(--dash-dark);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--dash-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dash-white);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.author-info {}
.author-name { font-weight: 700; font-size: 0.92rem; color: var(--dash-dark); }
.author-role { font-size: 0.8rem; color: var(--dash-gray); }

/* ==========================================================================
   BLOG / INSIGHTS
   ========================================================================== */
.blog-card {
    background: var(--dash-white);
    border-radius: var(--dash-radius-lg);
    overflow: hidden;
    border: 1px solid var(--dash-border);
    transition: var(--dash-transition);
}

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

.blog-thumb {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: var(--dash-gray-light);
}

.blog-body { padding: 1.5rem; }

.blog-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.blog-cat {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--dash-primary);
    background: rgba(10, 102, 194, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.blog-date { font-size: 0.8rem; color: var(--dash-gray); }

.blog-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dash-dark);
    margin-bottom: 0.75rem;
    line-height: 1.4;
    transition: var(--dash-transition);
}

.blog-card:hover .blog-title { color: var(--dash-primary); }

.blog-excerpt { font-size: 0.88rem; color: var(--dash-gray); line-height: 1.65; margin-bottom: 1.25rem; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band {
    background: linear-gradient(135deg, var(--dash-dark) 0%, #0a2540 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(10, 102, 194, 0.2), transparent 70%);
}

.cta-band-inner { position: relative; z-index: 1; }
.cta-band h2 { color: var(--dash-white); font-size: clamp(1.75rem, 3vw, 2.75rem); margin-bottom: 1rem; }
.cta-band p { color: rgba(255,255,255,0.65); font-size: 1.05rem; margin-bottom: 2rem; max-width: 520px; margin-left: auto; margin-right: auto; }
.cta-band .cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.contact-section { background: var(--dash-white); }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: start;
}

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

.contact-info h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.contact-info p { color: var(--dash-gray); margin-bottom: 2rem; }

.contact-detail {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.contact-detail-icon {
    width: 40px;
    height: 40px;
    background: rgba(10, 102, 194, 0.1);
    border-radius: var(--dash-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dash-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.contact-detail-text { font-size: 0.9rem; }
.contact-detail-text strong { display: block; color: var(--dash-dark); font-weight: 600; margin-bottom: 0.2rem; }
.contact-detail-text span { color: var(--dash-gray); }

.contact-form {}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--dash-dark); margin-bottom: 0.4rem; }

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--dash-border);
    border-radius: var(--dash-radius);
    font-family: var(--dash-body-font);
    font-size: 0.92rem;
    color: var(--dash-dark);
    background: var(--dash-white);
    transition: var(--dash-transition);
    outline: none;
    appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.12);
}

.form-group textarea { resize: vertical; min-height: 130px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
#dash-footer {
    background: var(--dash-footer-bg, var(--dash-dark));
    color: rgba(255,255,255,0.7);
    padding-top: 4rem;
}

.footer-grid {
    display: grid;
    /* Brand column (2fr) + one 1fr per configured footer column.
       --dash-footer-cols is set inline on the element from the theme option. */
    grid-template-columns: 2fr repeat(var(--dash-footer-cols, 3), minmax(0, 1fr));
    gap: 2.5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand {}
/* Footer logo link, width:fit-content + auto margins let the dashboard
   alignment selector (left/center/right) move just the logo. Defaults left. */
.footer-brand .site-footer-logo-link {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1rem;
    margin-left: var(--dash-footer-logo-ml, 0);
    margin-right: var(--dash-footer-logo-mr, auto);
}
.footer-brand .logo-name { color: var(--dash-white); font-size: 1.5rem; }
.footer-brand .logo-tagline { color: rgba(255,255,255,0.4); }
.footer-brand p { font-size: 0.9rem; line-height: 1.8; margin-top: 1rem; margin-bottom: 1.5rem; }

.footer-social { display: flex; gap: 0.75rem; }
.social-link {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    font-size: 0.95rem;
    transition: var(--dash-transition);
}
.social-link:hover { background: var(--dash-primary); border-color: var(--dash-primary); color: var(--dash-white); }

.footer-col h4 {
    color: var(--dash-white);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.25rem;
}

.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 0.65rem; }
.footer-col ul li a {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.55);
    transition: var(--dash-transition);
}
.footer-col ul li a:hover { color: var(--dash-white); padding-left: 4px; }

/* Contact Info widget (Revdash_Contact_Widget), tuned for the dark footer,
   degrades fine in lighter widget areas (header/sidebar). */
.dash-contact-widget {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dash-ci-row {
    display: flex;
    /* Center the icon against the whole text block so it sits in the middle of
       multi-line items (address, hours) instead of pinned to the top line. */
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.6);
}
.dash-ci-row:last-child { margin-bottom: 0; }
.dash-ci-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dash-radius);
    background: rgba(255,255,255,0.06);
    color: var(--dash-primary-light);
    font-size: 0.9rem;
}
.dash-ci-text a {
    color: rgba(255,255,255,0.6);
    transition: var(--dash-transition);
}
.dash-ci-text a:hover { color: var(--dash-white); }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-bottom-text { font-size: 0.83rem; }
.footer-credit {
    font-size: 0.78rem;
    margin: 0;
    flex-basis: 100%;
    order: 3;
    width: 100%;
    text-align: center;
    color: rgba(255,255,255,0.4);
}
.footer-credit a {
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-credit a:hover { color: var(--dash-white); }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { font-size: 0.83rem; color: rgba(255,255,255,0.5); }
.footer-bottom-links a:hover { color: var(--dash-white); }

/* Contact details in the footer's brand column. Plain list, no bullets, sized
   with the tagline above it so the column reads as one block. */
.footer-contact {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: .45rem;
    font-size: .95rem;
    line-height: 1.5;
}
.footer-contact a { text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
#dash-footer.footer-layout-centered .footer-contact { justify-items: center; }

/* ── Footer layout templates ─────────────────────────────────────────────── */
/* Centered, collapse the grid into one centered column; center the bottom bar. */
#dash-footer.footer-layout-centered .footer-grid {
    display: block;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
#dash-footer.footer-layout-centered .footer-col { margin-top: 2rem; }
#dash-footer.footer-layout-centered .footer-social { justify-content: center; }
#dash-footer.footer-layout-centered .footer-bottom { justify-content: center; text-align: center; }
/* Minimal, footer.php omits the grid, leaving only the bottom bar; center it. */
#dash-footer.footer-layout-minimal .footer-bottom { justify-content: center; text-align: center; }
/* Custom, Revolutionary Blocks renders the whole footer; let it own spacing. */
#dash-footer.footer-layout-custom { padding-top: 0; }
#dash-footer.footer-layout-custom .dash-custom-footer { width: 100%; }

/* ==========================================================================
   WORDPRESS CORE / GUTENBERG
   ========================================================================== */
.wp-block-image img { border-radius: var(--dash-radius); }
.wp-block-quote { border-left: 4px solid var(--dash-primary); }
.wp-block-button__link { border-radius: var(--rev-btn-radius, var(--dash-btn-radius, var(--dash-radius))) !important; }

.entry-content img { border-radius: var(--dash-radius); }
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.entry-content table th, .entry-content table td { padding: 0.75rem 1rem; border: 1px solid var(--dash-border); text-align: left; }
.entry-content table th { background: var(--dash-gray-light); font-weight: 700; }

.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 0 auto 1.5rem; }

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.dash-pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 3rem;
}

.dash-pagination a, .dash-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dash-dark);
    transition: var(--dash-transition);
}

.dash-pagination a:hover, .dash-pagination .current {
    background: var(--dash-primary);
    border-color: var(--dash-primary);
    color: var(--dash-white);
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ==========================================================================
   FRONT PAGE LAYOUT HELPERS
   ========================================================================== */
.why-us-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.process-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 4rem;
    align-items: start;
}

@media (max-width: 900px) {
    .why-us-grid,
    .process-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.blog-thumb-placeholder {
    width: 100%;
    height: 220px;
    background: var(--dash-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-thumb-placeholder i {
    font-size: 2.5rem;
    color: var(--dash-border);
}

/* ==========================================================================
   SCROLL-TO-TOP
   ========================================================================== */
#scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    /* Mirror .btn-primary so the user's CTA-button color treatment carries
       through (the wp_head emission overrides background + color when custom
       CTA colors are saved; this is the matching default). */
    background: linear-gradient(135deg, var(--dash-primary) 0%, var(--dash-primary-dark) 100%);
    color: var(--dash-white);
    border: none;
    border-radius: var(--dash-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: var(--dash-shadow);
    opacity: 0;
    visibility: hidden;
    transition: var(--dash-transition);
    z-index: 8888;
}

#scroll-top.visible { opacity: 1; visibility: visible; }
#scroll-top:hover {
    /* Same hover cascade as .btn-primary, dedicated --dash-btn-hover wins
       when set; otherwise the brand gradient flips for a subtle direction
       change instead of a flat darken. */
    background: var(--dash-btn-hover, linear-gradient(135deg, var(--dash-primary-dark) 0%, var(--dash-primary) 100%));
    transform: translateY(-3px);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .primary-nav, .header-cta { display: none; }
    .menu-toggle { display: flex; }
    .section-padding { padding: 3.5rem 0; }
}

@media (max-width: 768px) {
    .hero-actions { flex-direction: column; align-items: flex-start; }
    .hero-stats { gap: 1.5rem; }
    .process-step { grid-template-columns: 60px 1fr; }
}

@media (max-width: 480px) {
    .container { padding: 0 1rem; }
    .btn-lg { padding: 0.85rem 1.5rem; font-size: 0.95rem; }
    .header-inner { height: 68px; }
}

/* ==========================================================================
   GOD-TIER ENHANCEMENTS, Premium Home Page Polish
   Layered on top of base styles; references existing CSS vars only.
   ========================================================================== */

/* --- Global polish: selection + scrollbar --- */
::selection { background: var(--dash-primary); color: var(--dash-white); }
::-moz-selection { background: var(--dash-primary); color: var(--dash-white); }

html { scroll-padding-top: 96px; }

@supports (scrollbar-color: auto) {
    html { scrollbar-color: var(--dash-primary) var(--dash-gray-light); scrollbar-width: thin; }
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--dash-gray-light); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dash-primary), var(--dash-secondary));
    border-radius: 8px;
    border: 3px solid var(--dash-gray-light);
}
::-webkit-scrollbar-thumb:hover { background: var(--dash-primary-dark); }

/* --- Reveal-on-load stagger (CSS-only) --- */
@media (prefers-reduced-motion: no-preference) {
    .grid-3 > .service-card,
    .grid-3 > .testimonial-card,
    .grid-3 > .blog-card,
    .tech-logos-grid > .tech-logo-item,
    .stats-grid > .stat-item,
    .process-steps > .process-step,
    .feature-item {
        animation: dash-rise .9s cubic-bezier(.16, 1, .3, 1) backwards;
    }
    .grid-3 > *:nth-child(1),
    .tech-logos-grid > *:nth-child(1),
    .stats-grid > *:nth-child(1),
    .process-steps > *:nth-child(1) { animation-delay: .05s; }
    .grid-3 > *:nth-child(2),
    .tech-logos-grid > *:nth-child(2),
    .stats-grid > *:nth-child(2),
    .process-steps > *:nth-child(2) { animation-delay: .15s; }
    .grid-3 > *:nth-child(3),
    .tech-logos-grid > *:nth-child(3),
    .stats-grid > *:nth-child(3),
    .process-steps > *:nth-child(3) { animation-delay: .25s; }
    .grid-3 > *:nth-child(4),
    .tech-logos-grid > *:nth-child(4),
    .stats-grid > *:nth-child(4),
    .process-steps > *:nth-child(4) { animation-delay: .35s; }
    .grid-3 > *:nth-child(5),
    .tech-logos-grid > *:nth-child(5) { animation-delay: .45s; }
    .grid-3 > *:nth-child(6),
    .tech-logos-grid > *:nth-child(6) { animation-delay: .55s; }
    .tech-logos-grid > *:nth-child(n+7) { animation-delay: .65s; }
}

@keyframes dash-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   HERO, Aurora mesh + floating glow orbs + animated gradient title
   ========================================================================== */
.dash-hero-fallback {
    background:
        radial-gradient(ellipse 70% 60% at 18% 25%, rgba(10, 102, 194, 0.45) 0%, transparent 55%),
        radial-gradient(ellipse 60% 55% at 82% 75%, rgba(0, 200, 160, 0.28) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 50% 110%, rgba(61, 143, 224, 0.25) 0%, transparent 60%),
        linear-gradient(135deg, #0a1422 0%, var(--dash-dark) 45%, #0a2540 100%);
}

.dash-hero-fallback::before {
    background:
        radial-gradient(circle at 18% 22%, rgba(61, 143, 224, 0.55), transparent 28%),
        radial-gradient(circle at 82% 78%, rgba(0, 200, 160, 0.40), transparent 28%),
        radial-gradient(circle at 50% 50%, rgba(10, 102, 194, 0.20), transparent 50%);
    filter: blur(60px);
    will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
    .dash-hero-fallback::before {
        animation: dash-orb-drift 22s ease-in-out infinite alternate;
    }
}

@keyframes dash-orb-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-30px, 40px, 0) scale(1.1); }
    100% { transform: translate3d(25px, -25px, 0) scale(0.95); }
}

.dash-hero-fallback::after {
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 85%);
    opacity: 0.7;
}

.hero-content-wrap { position: relative; }

.hero-content-wrap::after {
    content: '';
    position: absolute;
    right: -120px;
    top: -80px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(0, 200, 160, 0.35), transparent 65%);
    filter: blur(70px);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
    .hero-content-wrap::after { animation: dash-pulse-glow 7s ease-in-out infinite; }
}

@keyframes dash-pulse-glow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.18); }
}

.hero-badge {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: linear-gradient(135deg, rgba(10, 102, 194, 0.28), rgba(0, 200, 160, 0.15));
    box-shadow: 0 4px 24px -8px rgba(0, 200, 160, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hero-title {
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.35);
}

.hero-title .highlight {
    background: linear-gradient(135deg, #3d8fe0 0%, #00c8a0 45%, #00e6b8 70%, #3d8fe0 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
    .hero-title .highlight { animation: dash-shimmer 6s linear infinite; }
}

@keyframes dash-shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.hero-stat-item {
    position: relative;
    padding-right: 2.5rem;
}
.hero-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 42px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.25), transparent);
}

.hero-stat-number {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.65) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero scroll indicator */
.dash-hero-fallback .container::after {
    content: '';
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    pointer-events: none;
}
.dash-hero-fallback .container::before {
    content: '';
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--dash-secondary);
    border-radius: 2px;
    pointer-events: none;
}
.dash-hero-fallback .container { position: relative; }
@media (prefers-reduced-motion: no-preference) {
    .dash-hero-fallback .container::before { animation: dash-scroll-hint 2.2s ease-in-out infinite; }
}
@keyframes dash-scroll-hint {
    0%   { transform: translate(-50%, 0); opacity: 1; }
    70%  { transform: translate(-50%, 12px); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 0; }
}
@media (max-width: 768px) {
    .dash-hero-fallback .container::after,
    .dash-hero-fallback .container::before { display: none; }
}

/* ==========================================================================
   SERVICES, Glassmorphic cards with gradient borders
   ========================================================================== */
.services-section {
    background: linear-gradient(180deg, var(--dash-white) 0%, #fafbfd 100%);
    position: relative;
    overflow: hidden;
}

.services-section::before {
    content: '';
    position: absolute;
    top: 5%;
    left: -10%;
    width: 35%;
    height: 60%;
    background: radial-gradient(circle, rgba(10, 102, 194, 0.07), transparent 70%);
    pointer-events: none;
}

.services-section::after {
    content: '';
    position: absolute;
    bottom: 5%;
    right: -10%;
    width: 35%;
    height: 60%;
    background: radial-gradient(circle, rgba(0, 200, 160, 0.06), transparent 70%);
    pointer-events: none;
}

.services-section > .container { position: relative; z-index: 1; }

.service-card {
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    box-shadow: 0 4px 20px -8px rgba(13, 27, 42, 0.08);
}

.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--dash-radius-lg);
    padding: 1.5px;
    background: linear-gradient(135deg, transparent 25%, var(--dash-primary) 60%, var(--dash-secondary) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.service-card:hover::after { opacity: 1; }

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 60px -20px rgba(10, 102, 194, 0.28);
}

.service-icon {
    box-shadow: 0 8px 24px -10px rgba(10, 102, 194, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.service-card:hover .service-icon {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary));
    color: var(--dash-white);
    box-shadow:
        0 14px 32px -10px rgba(10, 102, 194, 0.55),
        0 0 0 6px rgba(10, 102, 194, 0.08);
    transform: rotate(-6deg) scale(1.06);
}

/* ==========================================================================
   STATS STRIP, Animated grid pattern + light bloom
   ========================================================================== */
.stats-strip {
    position: relative;
    overflow: hidden;
}

.stats-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.1), transparent 35%),
        radial-gradient(circle at 85% 50%, rgba(0, 200, 160, 0.18), transparent 40%);
    pointer-events: none;
}

.stats-strip::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    pointer-events: none;
}

.stats-strip > .container { position: relative; z-index: 1; }

.stat-item {
    padding: 1.25rem 0.5rem;
    border-radius: var(--dash-radius-lg);
    transition: var(--dash-transition);
}
.stat-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-4px);
}

.stat-number {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-divider {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    width: 40px;
}

/* ==========================================================================
   FEATURES, Aurora glow + animated icon shine
   ========================================================================== */
.features-section::after {
    content: '';
    position: absolute;
    bottom: -180px;
    left: -150px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(0, 200, 160, 0.18), transparent 70%);
    pointer-events: none;
}

.features-section > .container { position: relative; z-index: 1; }

.feature-icon-wrap {
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(10, 102, 194, 0.6);
    transition: var(--dash-transition);
}

.feature-icon-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 38%, rgba(255, 255, 255, 0.45) 50%, transparent 62%);
    transform: translateX(-110%);
    transition: transform 0.9s ease;
}

.feature-item:hover .feature-icon-wrap {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 16px 40px -10px rgba(0, 200, 160, 0.55);
}

.feature-item:hover .feature-icon-wrap::before { transform: translateX(110%); }

.feature-item {
    border: 1px solid transparent;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   PROCESS, Polished step numbers + decorative glow
   ========================================================================== */
.process-section {
    position: relative;
    overflow: hidden;
}

.process-section::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(10, 102, 194, 0.07), transparent 70%);
    pointer-events: none;
}

.process-section > .container { position: relative; z-index: 1; }

.step-number {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-primary-dark));
    box-shadow:
        0 10px 28px -10px rgba(10, 102, 194, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.4s cubic-bezier(.16, 1, .3, 1), box-shadow 0.4s ease;
}

.process-step:hover .step-number {
    transform: scale(1.12) rotate(8deg);
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary));
    box-shadow: 0 16px 36px -10px rgba(0, 200, 160, 0.55);
}

.step-content h3 { transition: color 0.25s ease; }
.process-step:hover .step-content h3 { color: var(--dash-primary); }

/* ==========================================================================
   TECH STACK, Conic-gradient halo + 3D tilt
   ========================================================================== */
.tech-logo-item {
    position: relative;
    background: linear-gradient(180deg, var(--dash-white) 0%, #fafbfd 100%);
    isolation: isolate;
}

.tech-logo-item::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--dash-radius-lg) + 2px);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--dash-primary) 80deg,
        var(--dash-secondary) 180deg,
        transparent 270deg
    );
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.tech-logo-item:hover::before { opacity: 0.4; }

@media (prefers-reduced-motion: no-preference) {
    .tech-logo-item:hover::before { animation: dash-spin 4s linear infinite; }
}

@keyframes dash-spin { to { transform: rotate(360deg); } }

.tech-logo-item:hover {
    transform: translateY(-6px) scale(1.04);
    border-color: transparent;
    box-shadow: 0 16px 36px -12px rgba(10, 102, 194, 0.3);
}

.tech-logo-item .tech-icon { transition: transform 0.35s ease, color 0.25s ease; }
.tech-logo-item:hover .tech-icon { transform: scale(1.18); color: var(--dash-primary); }

/* ==========================================================================
   TESTIMONIALS, Quote watermark + premium hover
   ========================================================================== */
.testimonials-section {
    position: relative;
    overflow: hidden;
}

.testimonials-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 5%, rgba(10, 102, 194, 0.07), transparent 35%),
        radial-gradient(circle at 5% 95%, rgba(0, 200, 160, 0.07), transparent 35%);
    pointer-events: none;
}

.testimonials-section > .container { position: relative; z-index: 1; }

.testimonial-card {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
    overflow: hidden;
}

.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: -28px;
    right: 14px;
    font-size: 7rem;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
    color: var(--dash-primary);
    opacity: 0.08;
    font-weight: 900;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.4s ease;
}

.testimonial-card:hover::before {
    opacity: 0.14;
    transform: scale(1.08) rotate(-6deg);
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px -18px rgba(10, 102, 194, 0.25);
}

.author-avatar {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary));
    box-shadow: 0 8px 18px -6px rgba(10, 102, 194, 0.45);
    border: 2px solid var(--dash-white);
}

/* ==========================================================================
   BLOG, Image zoom + premium card
   ========================================================================== */
.blog-card { position: relative; }
.blog-card > a { display: block; overflow: hidden; border-radius: var(--dash-radius-lg) var(--dash-radius-lg) 0 0; }
.blog-thumb { transition: transform 0.6s cubic-bezier(.16, 1, .3, 1); }
.blog-card:hover .blog-thumb { transform: scale(1.07); }

.blog-card:hover {
    box-shadow: 0 24px 50px -18px rgba(10, 102, 194, 0.22);
    transform: translateY(-6px);
}

.blog-cat {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-primary-light));
    color: var(--dash-white);
    box-shadow: 0 2px 6px -2px rgba(10, 102, 194, 0.4);
}

/* ==========================================================================
   CTA BAND, Layered glow + mesh + gradient headline
   ========================================================================== */
.cta-band {
    background:
        radial-gradient(ellipse 55% 60% at 25% 30%, rgba(10, 102, 194, 0.45), transparent 60%),
        radial-gradient(ellipse 55% 60% at 75% 75%, rgba(0, 200, 160, 0.30), transparent 60%),
        linear-gradient(135deg, #0a1422 0%, var(--dash-dark) 50%, #0a2540 100%);
}

.cta-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 85%);
    pointer-events: none;
}

.cta-band h2 {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   CONTACT, Floating form card + interactive details
   ========================================================================== */
.contact-section {
    background: linear-gradient(180deg, var(--dash-white) 0%, #fafbfd 100%);
    position: relative;
    overflow: hidden;
}

.contact-section::before {
    content: '';
    position: absolute;
    top: 10%;
    right: -10%;
    width: 40%;
    height: 60%;
    background: radial-gradient(circle, rgba(10, 102, 194, 0.06), transparent 70%);
    pointer-events: none;
}

.contact-section > .container { position: relative; z-index: 1; }

.contact-detail {
    padding: 0.85rem 1rem;
    border-radius: var(--dash-radius-lg);
    transition: var(--dash-transition);
    margin-bottom: 0.5rem;
}
.contact-detail:hover {
    background: rgba(10, 102, 194, 0.04);
    transform: translateX(6px);
}

.contact-detail-icon {
    background: linear-gradient(135deg, rgba(10, 102, 194, 0.12), rgba(0, 200, 160, 0.10));
    transition: var(--dash-transition);
}

.contact-detail:hover .contact-detail-icon {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary));
    color: var(--dash-white);
    transform: scale(1.1) rotate(-4deg);
    box-shadow: 0 8px 20px -6px rgba(10, 102, 194, 0.45);
}

.contact-form {
    background: var(--dash-white);
    padding: 2.5rem;
    border-radius: var(--dash-radius-lg);
    box-shadow: 0 24px 60px -24px rgba(10, 102, 194, 0.18);
    border: 1px solid var(--dash-border);
    position: relative;
}

.contact-form::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--dash-radius-lg);
    padding: 1px;
    background: linear-gradient(135deg, var(--dash-primary), transparent 50%, var(--dash-secondary));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.35;
    pointer-events: none;
}

@media (max-width: 540px) {
    .contact-form { padding: 1.5rem; }
}

.form-group input,
.form-group select,
.form-group textarea {
    background: #f9fafc;
    border-color: transparent;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    background: #f4f6fa;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background: var(--dash-white);
    border-color: var(--dash-primary);
    box-shadow:
        0 0 0 3px rgba(10, 102, 194, 0.15),
        0 4px 16px -4px rgba(10, 102, 194, 0.18);
}

/* ==========================================================================
   BUTTONS, Premium feel with subtle glow
   ========================================================================== */
.btn-primary {
    /* Shadow/glow consumes the suite --rev-btn-* contract instead of a hardcoded
       blue, so it tracks the brand (and a Revolutionary Blocks button can switch
       it off or recolor it per-button via its Glow control). */
    box-shadow: var(--rev-btn-shadow, none);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform 0.7s ease;
}
.btn-primary:hover::before { transform: translateX(110%); }

.btn-primary:hover {
    /* A dedicated Button-hover brand color (--dash-btn-hover) wins when set;
       otherwise fall back to the default gradient flip. */
    background: var(--dash-btn-hover, linear-gradient(135deg, var(--dash-primary-dark) 0%, var(--dash-primary) 100%));
    box-shadow: var(--rev-btn-shadow-hover, var(--rev-btn-shadow, none));
}

.btn-outline-white {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   SECTION HEADERS, Tag enhancement
   ========================================================================== */
.section-tag {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-tag::before {
    background: linear-gradient(90deg, var(--dash-primary), var(--dash-secondary));
}

.features-section .section-tag,
.cta-band .section-tag {
    background: linear-gradient(135deg, var(--dash-secondary), var(--dash-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   ACCESSIBILITY, Honor reduced motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   REVBLOCKS HOME PARITY, Make Revolutionary-Blocks-rendered pages look
   identical to the hardcoded god-tier front-page.php sections.
   Each section is tagged with a `dash-rev-*` css_class by the installer
   helpers in inc/revblocks-installer.php; the rules below hook those.
   ========================================================================== */

/* --- Generic: full-bleed sections, wider inner, modern spacing --- */
.rb-section.dash-rev-services,
.rb-section.dash-rev-features,
.rb-section.dash-rev-process,
.rb-section.dash-rev-tech,
.rb-section.dash-rev-testimonials,
.rb-section.dash-rev-blog,
.rb-section.dash-rev-cta,
.rb-section.dash-rev-contact,
.rb-section.dash-rev-section-header {
    width: 100%;
}

.rb-section.dash-rev-services > .rb-section__inner,
.rb-section.dash-rev-features > .rb-section__inner,
.rb-section.dash-rev-process > .rb-section__inner,
.rb-section.dash-rev-tech > .rb-section__inner,
.rb-section.dash-rev-testimonials > .rb-section__inner,
.rb-section.dash-rev-blog > .rb-section__inner,
.rb-section.dash-rev-cta > .rb-section__inner,
.rb-section.dash-rev-contact > .rb-section__inner,
.rb-section.dash-rev-section-header > .rb-section__inner {
    max-width: 1280px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    gap: 2rem;
}

/* --- Eyebrow / H2 / Lead inside rb section headers --- */
.dash-rev-eyebrow .rb-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0 0 0.5rem;
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dash-rev-h2 .rb-heading {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin: 0 0 1rem;
}
.dash-rev-lead .rb-text {
    font-size: 1.05rem;
    max-width: 640px;
    line-height: 1.75;
    margin: 0 auto;
}
.dash-rev-section-header > .rb-section__inner { padding-bottom: 8px; flex-direction: column; align-items: center; }
.dash-rev-section-header .rb-column { text-align: center; width: 100% !important; flex: 1 1 100%; }

/* On-dark variant for features section eyebrow */
.dash-rev-on-dark .dash-rev-eyebrow .rb-heading {
    background: linear-gradient(135deg, var(--dash-secondary), var(--dash-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Services grid (3-up, glassmorphic card with gradient border on hover) --- */
.rb-section.dash-rev-services {
    background:
        linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) !important;
    position: relative;
    overflow: hidden;
}
.rb-section.dash-rev-services::before {
    content: '';
    position: absolute;
    top: 5%; left: -10%;
    width: 35%; height: 60%;
    background: radial-gradient(circle, rgba(10,102,194,0.08), transparent 70%);
    pointer-events: none;
}
.rb-section.dash-rev-services::after {
    content: '';
    position: absolute;
    bottom: 5%; right: -10%;
    width: 35%; height: 60%;
    background: radial-gradient(circle, rgba(0,200,160,0.06), transparent 70%);
    pointer-events: none;
}
.rb-section.dash-rev-services > .rb-section__inner { position: relative; z-index: 1; }

.rb-section.dash-rev-services .rb-column {
    padding: 10px;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}
.rb-section.dash-rev-services .rb-widget--icon_box {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    padding: 2rem;
    transition: var(--dash-transition);
    overflow: hidden;
    box-shadow: 0 4px 20px -8px rgba(13,27,42,0.08);
    margin: 0;
}
.rb-section.dash-rev-services .rb-widget--icon_box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dash-primary), var(--dash-secondary));
    transform: scaleX(0);
    transition: var(--dash-transition);
    transform-origin: left;
}
.rb-section.dash-rev-services .rb-widget--icon_box:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 24px 60px -20px rgba(10,102,194,0.28);
}
.rb-section.dash-rev-services .rb-widget--icon_box:hover::before { transform: scaleX(1); }

.rb-section.dash-rev-services .rb-iconbox__icon-wrap {
    background: linear-gradient(135deg, rgba(10,102,194,0.10), rgba(0,200,160,0.10)) !important;
    border-radius: var(--dash-radius);
    width: 56px;
    height: 56px;
    box-shadow: 0 8px 24px -10px rgba(10,102,194,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
    transition: var(--dash-transition);
}
.rb-section.dash-rev-services .rb-widget--icon_box:hover .rb-iconbox__icon-wrap {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary)) !important;
    transform: rotate(-6deg) scale(1.06);
    box-shadow: 0 14px 32px -10px rgba(10,102,194,0.55), 0 0 0 6px rgba(10,102,194,0.08);
}
.rb-section.dash-rev-services .rb-widget--icon_box:hover .rb-iconbox__icon--svg svg { fill: #ffffff !important; }
.rb-section.dash-rev-services .rb-iconbox__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dash-dark);
    margin: 1rem 0 0.5rem;
}
.rb-section.dash-rev-services .rb-iconbox__body {
    font-size: 0.92rem;
    color: var(--dash-gray);
    line-height: 1.7;
}

/* --- Stats strip (animated grid + glow over the primary background) --- */
.rb-section.dash-rev-section-header + .rb-section.dash-rev-services,
.rb-section.dash-rev-section-header + .rb-section.dash-rev-tech,
.rb-section.dash-rev-section-header + .rb-section.dash-rev-testimonials,
.rb-section.dash-rev-section-header + .rb-section.dash-rev-blog { padding-top: 0; }

/* Stats strip, the rb_sec_stats output is rendered as a section with a
   primary bg. Add bloom + grid overlay so it matches the hardcoded look. */
.rb-section[class*="rb-id-"] > .rb-section__inner > .rb-column > .rb-widget--counter { position: relative; }

/* Apply the lift + glow only to sections whose bg is primary blue.
   The installer always sets the bg to var(--dash-primary) for stats. */
.rb-document > .rb-section + .rb-section .rb-counter__number,
.rb-document .rb-section .rb-widget--counter .rb-counter__number {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hard rule: when a section has only counter widgets and a blue/dark bg,
   layer on the grid overlay. We add an explicit class via the rb_sec_stats. */
.rb-section.dash-rev-features,
.rb-section.dash-rev-cta {
    position: relative;
    overflow: hidden;
    color: var(--dash-white);
}

/* --- Features (Why us) section: dark with aurora glow + shine on icons --- */
.rb-section.dash-rev-features {
    background:
        radial-gradient(ellipse 60% 60% at 30% 30%, rgba(10,102,194,0.30), transparent 60%),
        radial-gradient(ellipse 60% 60% at 70% 70%, rgba(0,200,160,0.20), transparent 60%),
        linear-gradient(135deg, var(--dash-dark) 0%, var(--dash-dark-alt) 100%) !important;
}
.rb-section.dash-rev-features::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(10,102,194,0.15), transparent 70%);
    pointer-events: none;
}
.rb-section.dash-rev-features::after {
    content: '';
    position: absolute;
    bottom: -180px; left: -150px;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(0,200,160,0.18), transparent 70%);
    pointer-events: none;
}
.rb-section.dash-rev-features > .rb-section__inner { position: relative; z-index: 1; }

.rb-section.dash-rev-features .dash-rev-feature-item {
    background: transparent;
    border-radius: var(--dash-radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 0.5rem;
    transition: var(--dash-transition);
    border: 1px solid transparent;
}
.rb-section.dash-rev-features .dash-rev-feature-item:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
.rb-section.dash-rev-features .dash-rev-feature-item .rb-iconbox__icon-wrap {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary)) !important;
    width: 48px;
    height: 48px;
    border-radius: var(--dash-radius);
    box-shadow: 0 10px 30px -10px rgba(10,102,194,0.6);
    overflow: hidden;
    position: relative;
}
.rb-section.dash-rev-features .dash-rev-feature-item:hover .rb-iconbox__icon-wrap {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 16px 40px -10px rgba(0,200,160,0.55);
}
.rb-section.dash-rev-features .dash-rev-feature-item .rb-iconbox__title { color: #ffffff !important; font-size: 1.05rem; margin: 0 0 0.4rem; }
.rb-section.dash-rev-features .dash-rev-feature-item .rb-iconbox__body { color: rgba(255,255,255,0.65) !important; font-size: 0.9rem; line-height: 1.65; }

/* Button override for dark features panel */
.rb-section.dash-rev-features .rb-widget--button .rb-button.dash-rev-btn-primary,
/* Buttons in this section follow the suite-wide --rev-btn-* CTA contract
   (fill, shape, size and the shine hover) like every other button, no
   per-section gradient/lift override, so all buttons stay in sync. */

/* --- Process section: light grey, numbered SVG icons + decorative glow --- */
.rb-section.dash-rev-process {
    background: var(--dash-gray-light) !important;
    position: relative;
    overflow: hidden;
}
.rb-section.dash-rev-process::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(10,102,194,0.08), transparent 70%);
    pointer-events: none;
}
.rb-section.dash-rev-process > .rb-section__inner { position: relative; z-index: 1; align-items: flex-start; }

.rb-section.dash-rev-process .dash-rev-process-step {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--dash-border);
    margin: 0;
    background: transparent;
}
.rb-section.dash-rev-process .dash-rev-process-step:last-child { border-bottom: 0; }
.rb-section.dash-rev-process .dash-rev-process-step .rb-iconbox__icon-wrap {
    transition: transform 0.4s cubic-bezier(.16, 1, .3, 1);
}
.rb-section.dash-rev-process .dash-rev-process-step:hover .rb-iconbox__icon-wrap {
    transform: scale(1.12) rotate(8deg);
}
.rb-section.dash-rev-process .dash-rev-process-step .rb-iconbox__title {
    font-size: 1.15rem;
    margin: 0 0 0.4rem;
    color: var(--dash-dark);
    transition: color 0.25s ease;
}
.rb-section.dash-rev-process .dash-rev-process-step:hover .rb-iconbox__title { color: var(--dash-primary); }
.rb-section.dash-rev-process .dash-rev-process-step .rb-iconbox__body { color: var(--dash-gray); font-size: 0.92rem; line-height: 1.7; }

/* Buttons follow the suite-wide --rev-btn-* CTA contract (see note above). */

/* --- Tech stack: 6-up icon-boxes with conic-halo on hover --- */
.rb-section.dash-rev-tech .rb-column {
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
}
.rb-section.dash-rev-tech .dash-rev-tech-item {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    padding: 1.25rem 1rem;
    transition: var(--dash-transition);
    position: relative;
    isolation: isolate;
    margin: 0;
}
.rb-section.dash-rev-tech .dash-rev-tech-item::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--dash-radius-lg) + 2px);
    background: conic-gradient(from 0deg, transparent 0deg, var(--dash-primary) 80deg, var(--dash-secondary) 180deg, transparent 270deg);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}
@media (prefers-reduced-motion: no-preference) {
    .rb-section.dash-rev-tech .dash-rev-tech-item:hover::before { animation: dash-spin 4s linear infinite; }
}
.rb-section.dash-rev-tech .dash-rev-tech-item:hover {
    transform: translateY(-6px) scale(1.04);
    border-color: transparent;
    box-shadow: 0 16px 36px -12px rgba(10,102,194,0.3);
}
.rb-section.dash-rev-tech .dash-rev-tech-item:hover::before { opacity: 0.4; }
.rb-section.dash-rev-tech .dash-rev-tech-item .rb-iconbox__icon-wrap {
    color: var(--dash-gray);
    transition: transform 0.35s ease, color 0.25s ease;
}
.rb-section.dash-rev-tech .dash-rev-tech-item:hover .rb-iconbox__icon-wrap {
    transform: scale(1.18);
    color: var(--dash-primary);
}
.rb-section.dash-rev-tech .dash-rev-tech-item .rb-iconbox__icon--svg svg { fill: currentColor; transition: fill 0.25s ease; }
.rb-section.dash-rev-tech .dash-rev-tech-item .rb-iconbox__title {
    font-size: 0.75rem !important;
    font-weight: 600;
    color: var(--dash-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0.5rem 0 0;
}

/* --- Testimonials: 3-up cards w/ quote watermark --- */
.rb-section.dash-rev-testimonials {
    background: var(--dash-gray-light) !important;
    position: relative;
    overflow: hidden;
}
.rb-section.dash-rev-testimonials::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 5%, rgba(10,102,194,0.07), transparent 35%),
        radial-gradient(circle at 5% 95%, rgba(0,200,160,0.07), transparent 35%);
    pointer-events: none;
}
.rb-section.dash-rev-testimonials > .rb-section__inner { position: relative; z-index: 1; }

.rb-section.dash-rev-testimonials .rb-column {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}
.rb-section.dash-rev-testimonials .rb-widget--testimonial {
    margin: 0;
}
.rb-section.dash-rev-testimonials .rb-testimonial {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    padding: 2rem;
    border-left-color: var(--dash-primary);
    overflow: hidden;
    transition: var(--dash-transition);
}
.rb-section.dash-rev-testimonials .rb-testimonial::before {
    content: '\201C';
    position: absolute;
    top: -28px; right: 14px;
    font-size: 7rem;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
    color: var(--dash-primary);
    opacity: 0.08;
    font-weight: 900;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.4s ease;
}
.rb-section.dash-rev-testimonials .rb-testimonial:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px -18px rgba(10,102,194,0.25);
}
.rb-section.dash-rev-testimonials .rb-testimonial:hover::before {
    opacity: 0.14;
    transform: scale(1.08) rotate(-6deg);
}
.rb-section.dash-rev-testimonials .rb-testimonial__quote {
    font-size: 0.95rem;
    color: var(--dash-dark);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-style: italic;
}
.rb-section.dash-rev-testimonials .rb-testimonial__name { color: var(--dash-dark); font-weight: 700; font-size: 0.92rem; }
.rb-section.dash-rev-testimonials .rb-testimonial__role { color: var(--dash-gray); font-size: 0.8rem; }

/* --- Blog grid: rb recent_posts laid out as 3-up cards --- */
.rb-section.dash-rev-blog { background: var(--dash-white) !important; }
.rb-section.dash-rev-blog .dash-rev-blog-list ul,
.rb-section.dash-rev-blog .dash-rev-blog-list ol,
.rb-section.dash-rev-blog .rb-widget--recent_posts > div,
.rb-section.dash-rev-blog .rb-widget--recent_posts ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
@media (max-width: 1024px) {
    .rb-section.dash-rev-blog .dash-rev-blog-list ul,
    .rb-section.dash-rev-blog .rb-widget--recent_posts ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .rb-section.dash-rev-blog .dash-rev-blog-list ul,
    .rb-section.dash-rev-blog .rb-widget--recent_posts ul { grid-template-columns: 1fr; }
}
.rb-section.dash-rev-blog .rb-widget--recent_posts li {
    background: var(--dash-white);
    border-radius: var(--dash-radius-lg);
    overflow: hidden;
    border: 1px solid var(--dash-border);
    transition: var(--dash-transition);
    padding: 1.5rem;
}
.rb-section.dash-rev-blog .rb-widget--recent_posts li:hover {
    box-shadow: 0 24px 50px -18px rgba(10,102,194,0.22);
    transform: translateY(-6px);
}
.rb-section.dash-rev-blog .rb-widget--recent_posts li a {
    font-weight: 700;
    color: var(--dash-dark);
    line-height: 1.4;
    text-decoration: none;
}
.rb-section.dash-rev-blog .rb-widget--recent_posts li:hover a { color: var(--dash-primary); }

/* --- CTA band: dark with layered glow + mesh + gradient headline --- */
.rb-section.dash-rev-cta {
    background:
        radial-gradient(ellipse 55% 60% at 25% 30%, rgba(10,102,194,0.45), transparent 60%),
        radial-gradient(ellipse 55% 60% at 75% 75%, rgba(0,200,160,0.30), transparent 60%),
        linear-gradient(135deg, #0a1422 0%, var(--dash-dark) 50%, #0a2540 100%) !important;
    text-align: center;
}
.rb-section.dash-rev-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 85%);
    pointer-events: none;
}
.rb-section.dash-rev-cta > .rb-section__inner { position: relative; z-index: 1; }
.rb-section.dash-rev-cta .rb-cta {
    background: transparent !important;
    color: var(--dash-white);
    padding: 1rem 0;
    border-radius: 0;
}
.rb-section.dash-rev-cta .rb-cta h2 {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    margin: 0 0 1rem;
    font-weight: 800;
}
.rb-section.dash-rev-cta .rb-cta p {
    color: rgba(255,255,255,0.7);
    font-size: 1.05rem;
    max-width: 520px;
    margin: 0 auto 2rem;
}
/* Buttons follow the suite-wide --rev-btn-* CTA contract (see note above). */

/* --- Contact section: left details + right form, with floating form card --- */
.rb-section.dash-rev-contact {
    background: linear-gradient(180deg, var(--dash-white) 0%, #fafbfd 100%) !important;
    position: relative;
    overflow: hidden;
}
.rb-section.dash-rev-contact::before {
    content: '';
    position: absolute;
    top: 10%; right: -10%;
    width: 40%; height: 60%;
    background: radial-gradient(circle, rgba(10,102,194,0.06), transparent 70%);
    pointer-events: none;
}
.rb-section.dash-rev-contact > .rb-section__inner { position: relative; z-index: 1; align-items: flex-start; }

.rb-section.dash-rev-contact .dash-rev-contact-detail {
    background: transparent;
    border: 1px solid transparent;
    padding: 0.85rem 1rem;
    margin: 0 0 0.5rem;
    border-radius: var(--dash-radius-lg);
    transition: var(--dash-transition);
}
.rb-section.dash-rev-contact .dash-rev-contact-detail:hover {
    background: rgba(10,102,194,0.04);
    transform: translateX(6px);
}
.rb-section.dash-rev-contact .dash-rev-contact-detail .rb-iconbox__icon-wrap {
    background: linear-gradient(135deg, rgba(10,102,194,0.12), rgba(0,200,160,0.10)) !important;
    width: 40px;
    height: 40px;
    border-radius: var(--dash-radius);
    color: var(--dash-primary);
    transition: var(--dash-transition);
}
.rb-section.dash-rev-contact .dash-rev-contact-detail:hover .rb-iconbox__icon-wrap {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary)) !important;
    transform: scale(1.1) rotate(-4deg);
    box-shadow: 0 8px 20px -6px rgba(10,102,194,0.45);
}
.rb-section.dash-rev-contact .dash-rev-contact-detail:hover .rb-iconbox__icon--svg svg { fill: #ffffff !important; }
.rb-section.dash-rev-contact .dash-rev-contact-detail .rb-iconbox__title {
    font-size: 0.9rem;
    color: var(--dash-dark);
    font-weight: 600;
    margin: 0 0 0.2rem;
}
.rb-section.dash-rev-contact .dash-rev-contact-detail .rb-iconbox__body {
    color: var(--dash-gray);
    font-size: 0.88rem;
}
.rb-section.dash-rev-contact .dash-rev-contact-form {
    background: var(--dash-white);
    padding: 2.5rem;
    border-radius: var(--dash-radius-lg);
    box-shadow: 0 24px 60px -24px rgba(10,102,194,0.18);
    border: 1px solid var(--dash-border);
    position: relative;
}

/* --- Hero (rb_sec_hero output), overlay with aurora mesh similar to the
       hardcoded hero so the look survives even without a background image. --- */
/* The hero (first revblocks section) background + decorative glows now live on
   the section's own Background gradient + Decoration fields, set by
   rb_sec_hero() in inc/revblocks-installer.php. The hardcoded `!important`
   background + ::before blobs that used to sit here overrode those fields (so
   the section Background control did nothing), removed in favour of the
   field-driven version, which is editable in the builder. position/overflow
   are kept so any first section that opts into decorations still clips them. */
.rb-document > .rb-section:first-child {
    position: relative;
    overflow: hidden;
}
.rb-document > .rb-section:first-child .rb-hero {
    background: transparent !important;
    padding: 120px 24px 100px;
}
.rb-document > .rb-section:first-child .rb-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
}
.rb-document > .rb-section:first-child .rb-hero p {
    font-size: 1.15rem;
    line-height: 1.8;
    opacity: 0.75;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}
/* The measure above centres the paragraph. That suits a centred hero and no
   other: on a left-aligned one the eyebrow and sub-heading sat in the middle,
   indented away from the heading above them. Centring stays the default so
   heroes built before this keep the look they had; the alignment arrives as a
   class on the section from rev_rb_hero(). */
.rb-document > .rb-section.hero-align-left:first-child .rb-hero p {
    margin-left: 0;
    margin-right: auto;
}
.rb-document > .rb-section.hero-align-right:first-child .rb-hero p {
    margin-left: auto;
    margin-right: 0;
}
/* Hero (first-section) buttons follow the suite-wide --rev-btn-* CTA contract
   too, solid theme fill + shine hover, so they match every other button
   instead of a per-section gradient + lift. */

/* --- Responsive: stack grids on smaller screens --- */
@media (max-width: 1024px) {
    .rb-section.dash-rev-services .rb-column,
    .rb-section.dash-rev-testimonials .rb-column {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .rb-section.dash-rev-tech .rb-column {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .rb-section.dash-rev-features > .rb-section__inner,
    .rb-section.dash-rev-process > .rb-section__inner,
    .rb-section.dash-rev-contact > .rb-section__inner {
        flex-direction: column;
    }
    .rb-section.dash-rev-features .rb-column,
    .rb-section.dash-rev-process .rb-column,
    .rb-section.dash-rev-contact .rb-column {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
@media (max-width: 640px) {
    .rb-section.dash-rev-services .rb-column,
    .rb-section.dash-rev-testimonials .rb-column {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .rb-section.dash-rev-tech .rb-column {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}