/*
Theme Name: Remote Monitoring & Management
Theme URI: https://revolutionaryrmm.com
Author: Revolutionary IT
Author URI: https://revolutionaryit.com
Description: Remote Monitoring & Management — WordPress theme with the Revolutionary dashboard.
Version: 1.0.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 {
    --tc-primary:       #0a66c2;
    --tc-primary-dark:  #0052a3;
    --tc-primary-light: #3d8fe0;
    --tc-secondary:     #00c8a0;
    --tc-dark:          #0d1b2a;
    --tc-dark-alt:      #162032;
    --tc-light:         #f7f9fc;
    --tc-text:          #1f2937;
    --tc-gray:          #6b7280;
    --tc-gray-light:    #f3f4f6;
    --tc-white:         #ffffff;
    --tc-border:        #e5e7eb;
    --tc-heading-font:  'Inter', 'Segoe UI', sans-serif;
    --tc-body-font:     'Inter', 'Segoe UI', sans-serif;
    --tc-mono-font:     'JetBrains Mono', 'Courier New', monospace;
    --tc-radius:        8px;
    --tc-radius-lg:     16px;
    --tc-shadow:        0 4px 24px rgba(10, 102, 194, 0.10);
    --tc-shadow-lg:     0 8px 48px rgba(10, 102, 194, 0.18);
    --tc-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(--tc-body-font);
    color: var(--tc-dark);
    background: var(--tc-white);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--tc-heading-font);
    font-weight: 700;
    line-height: 1.2;
    color: var(--tc-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(--tc-primary); text-decoration: none; transition: var(--tc-transition); }
a:hover { color: var(--tc-primary-dark); }

strong, b { font-weight: 700; }
em, i { font-style: italic; }
code { font-family: var(--tc-mono-font); background: var(--tc-gray-light); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
blockquote { border-left: 4px solid var(--tc-primary); padding: 1rem 1.5rem; margin: 1.5rem 0; background: var(--tc-gray-light); border-radius: 0 var(--tc-radius) var(--tc-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(--tc-btn-radius, var(--tc-radius));
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--tc-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(--tc-primary));
    color: var(--rev-btn-color, var(--tc-white));
    border-color: var(--rev-btn-bg, var(--tc-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(--tc-btn-hover, var(--tc-primary-dark)));
    border-color: var(--rev-btn-bg-hover, var(--tc-btn-hover, var(--tc-primary-dark)));
    color: var(--rev-btn-color, var(--tc-white));
}

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

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

.btn-outline-white {
    background: transparent;
    color: var(--tc-white);
    border-color: rgba(255,255,255,0.6);
}
.btn-outline-white:hover {
    background: var(--tc-white);
    color: var(--tc-primary);
    border-color: var(--tc-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
   ========================================================================== */
#tc-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: transparent;
    transition: var(--tc-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. */
#tc-header { --tc-hdr-fg: var(--tc-header-fg-solid, var(--tc-dark, #0d1b2a)); }
#tc-header.header-transparent:not(.scrolled) { --tc-hdr-fg: var(--tc-header-fg-trans, #ffffff); }

#tc-header.scrolled {
    background: rgba(13, 27, 42, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

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

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
    padding-top: var(--tc-header-pad-top, var(--tc-header-pad-y, 0px));
    padding-bottom: var(--tc-header-pad-bottom, var(--tc-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(--tc-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;
    color: var(--tc-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;
}

#tc-header.header-light .logo-name { color: var(--tc-hdr-fg); }
#tc-header.header-light .logo-tagline { color: var(--tc-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%;
    padding-top: var(--tc-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(--tc-menu-pad-x, 0.9rem);
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255,255,255,0.88);
    border-radius: 6px;
    transition: var(--tc-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(--tc-white);
    background: rgba(255,255,255,0.1);
}

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

/* 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(--tc-white);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-lg);
    box-shadow: var(--tc-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(--tc-dark);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 6px;
    transition: var(--tc-transition);
}

.primary-nav .sub-menu li a:hover {
    background: var(--tc-gray-light);
    color: var(--tc-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: 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(--tc-white);
    background: rgba(255,255,255,0.08);
}
#tc-header.header-light .header-right-nav > li > a { color: var(--tc-hdr-fg); }
#tc-header.header-light .header-right-nav > li > a:hover,
#tc-header.header-light .header-right-nav > li.current-menu-item > a {
    color: var(--tc-primary); background: var(--tc-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(--tc-border);
}
.mobile-right-nav li { padding: 0.5rem 0; }
.mobile-right-nav a {
    color: var(--tc-muted); font-size: 0.9rem; text-decoration: none; font-weight: 500;
}
.mobile-right-nav a:hover { color: var(--tc-primary); }

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

/* Header — logo image variants */
.site-logo-img { display: block; height: var(--tc-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(--tc-footer-logo-max-height, var(--tc-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. */
#tc-header.header-transparent.header-trans-logo-light:not(.scrolled) .site-logo-default { display: none; }
#tc-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. */
#tc-header.header-transparent:not(.scrolled) .site-logo-img {
    height: var(--tc-trans-logo-max-height, var(--tc-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. */
.tc-banner {
    position: relative;
    z-index: 10001; /* above #tc-header (9999) so it's never hidden behind it */
    background: var(--tc-primary, #0a66c2);
    color: #fff;
    text-align: center;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}
.tc-banner-text { display: inline-block; }
@media (max-width: 600px) { .tc-banner { font-size: 13px; padding: 8px 14px; } }

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

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

/* Header — STICKY */
#tc-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 #tc-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). */
#tc-header.header-layout-custom {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--tc-header-bg, var(--tc-dark, #0d1b2a));
}
#tc-header.header-layout-custom .tc-custom-header { width: 100%; }
#tc-header.header-layout-custom .rb-document { width: 100%; }

/* Header — OVERLAY mode (hamburger menu at all sizes) */
#tc-header.header-overlay-mode #primary-nav,
#tc-header.header-overlay-mode .header-widgets,
#tc-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 .tc-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; }
}
#tc-header.header-overlay-mode .menu-toggle { display: flex !important; }
#tc-header.header-overlay-mode.header-transparent .menu-toggle span { background: var(--tc-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. */
    #tc-header.header-layout-center .header-inner { position: relative; }
    #tc-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. */
    #tc-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. */
    #tc-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;
    }
    #tc-header.header-layout-stacked .site-logo { margin: 0 auto; }
    #tc-header.header-layout-stacked #primary-nav { margin: 0 auto; }
    #tc-header.header-layout-stacked .primary-nav { justify-content: center; }
    #tc-header.header-layout-stacked #header-right-nav { display: none; }
    #tc-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(--tc-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(--tc-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; }
#tc-header.header-overlay-mode .header-cta { display: none; }
@media (min-width: 1025px) {
    #tc-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(--tc-white);
    border-radius: 2px;
    transition: var(--tc-transition);
}

#tc-header.header-light .menu-toggle span { background: var(--tc-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(--tc-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
   ========================================================================== */
.tc-hero-fallback {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--tc-dark) 0%, var(--tc-dark-alt) 50%, #0a2540 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 120px 0 80px;
}

.tc-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%);
}

.tc-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(--tc-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(--tc-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(--tc-white);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
}

.hero-title .highlight {
    background: linear-gradient(135deg, var(--tc-primary-light), var(--tc-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(--tc-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(--tc-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(--tc-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(--tc-dark);
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

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

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

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

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

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

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

.service-card:hover {
    border-color: transparent;
    box-shadow: var(--tc-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(--tc-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
    color: var(--tc-primary);
    transition: var(--tc-transition);
}

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

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

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

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

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

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

/* ==========================================================================
   WHY CHOOSE US / FEATURES
   ========================================================================== */
.features-section {
    background: linear-gradient(135deg, var(--tc-dark) 0%, var(--tc-dark-alt) 100%);
    color: var(--tc-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(--tc-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(--tc-radius-lg);
    transition: var(--tc-transition);
}

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

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

.feature-content h4 { color: var(--tc-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(--tc-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(--tc-border);
    position: relative;
}

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

.step-number {
    width: 56px;
    height: 56px;
    background: var(--tc-primary);
    color: var(--tc-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(--tc-primary), var(--tc-border));
    z-index: 0;
}

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

/* ==========================================================================
   STATS / COUNTER STRIP
   ========================================================================== */
.stats-strip {
    background: linear-gradient(135deg, var(--tc-primary) 0%, var(--tc-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(--tc-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(--tc-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(--tc-border);
    border-radius: var(--tc-radius-lg);
    transition: var(--tc-transition);
    text-align: center;
}

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

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

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

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

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

.testimonial-card:hover {
    box-shadow: var(--tc-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(--tc-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(--tc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-white);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

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

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

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

.blog-thumb {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: var(--tc-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(--tc-primary);
    background: rgba(10, 102, 194, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

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

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

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

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

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band {
    background: linear-gradient(135deg, var(--tc-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(--tc-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(--tc-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(--tc-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(--tc-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.contact-detail-text { font-size: 0.9rem; }
.contact-detail-text strong { display: block; color: var(--tc-dark); font-weight: 600; margin-bottom: 0.2rem; }
.contact-detail-text span { color: var(--tc-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(--tc-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(--tc-border);
    border-radius: var(--tc-radius);
    font-family: var(--tc-body-font);
    font-size: 0.92rem;
    color: var(--tc-dark);
    background: var(--tc-white);
    transition: var(--tc-transition);
    outline: none;
    appearance: none;
}

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

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

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

.footer-grid {
    display: grid;
    /* Brand column (2fr) + one 1fr per configured footer column.
       --tc-footer-cols is set inline on the element from the theme option. */
    grid-template-columns: 2fr repeat(var(--tc-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(--tc-footer-logo-ml, 0);
    margin-right: var(--tc-footer-logo-mr, auto);
}
.footer-brand .logo-name { color: var(--tc-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(--tc-transition);
}
.social-link:hover { background: var(--tc-primary); border-color: var(--tc-primary); color: var(--tc-white); }

.footer-col h4 {
    color: var(--tc-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(--tc-transition);
}
.footer-col ul li a:hover { color: var(--tc-white); padding-left: 4px; }

/* Contact Info widget (Revdash_Contact_Widget) — tuned for the dark footer,
   degrades fine in lighter widget areas (header/sidebar). */
.tc-contact-widget {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tc-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);
}
.tc-ci-row:last-child { margin-bottom: 0; }
.tc-ci-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tc-radius);
    background: rgba(255,255,255,0.06);
    color: var(--tc-primary-light);
    font-size: 0.9rem;
}
.tc-ci-text a {
    color: rgba(255,255,255,0.6);
    transition: var(--tc-transition);
}
.tc-ci-text a:hover { color: var(--tc-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(--tc-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(--tc-white); }

/* ── Footer layout templates ─────────────────────────────────────────────── */
/* Centered — collapse the grid into one centered column; center the bottom bar. */
#tc-footer.footer-layout-centered .footer-grid {
    display: block;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
#tc-footer.footer-layout-centered .footer-col { margin-top: 2rem; }
#tc-footer.footer-layout-centered .footer-social { justify-content: center; }
#tc-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. */
#tc-footer.footer-layout-minimal .footer-bottom { justify-content: center; text-align: center; }
/* Custom — Revolutionary Blocks renders the whole footer; let it own spacing. */
#tc-footer.footer-layout-custom { padding-top: 0; }
#tc-footer.footer-layout-custom .tc-custom-footer { width: 100%; }

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

.entry-content img { border-radius: var(--tc-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(--tc-border); text-align: left; }
.entry-content table th { background: var(--tc-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
   ========================================================================== */
.tc-pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 3rem;
}

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

.tc-pagination a:hover, .tc-pagination .current {
    background: var(--tc-primary);
    border-color: var(--tc-primary);
    color: var(--tc-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(--tc-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-thumb-placeholder i {
    font-size: 2.5rem;
    color: var(--tc-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(--tc-primary) 0%, var(--tc-primary-dark) 100%);
    color: var(--tc-white);
    border: none;
    border-radius: var(--tc-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: var(--tc-shadow);
    opacity: 0;
    visibility: hidden;
    transition: var(--tc-transition);
    z-index: 8888;
}

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

/* ==========================================================================
   PRELOADER
   ========================================================================== */
#tc-preloader {
    position: fixed;
    inset: 0;
    background: var(--tc-dark);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#tc-preloader.loaded { opacity: 0; visibility: hidden; }

.preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.preloader-logo-text { color: var(--tc-white); font-size: 1.5rem; font-weight: 800; }

.preloader-bar {
    width: 200px;
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}

.preloader-bar::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--tc-primary), var(--tc-secondary));
    border-radius: 3px;
    transform-origin: left center;
    transform: scaleX(0);
    animation: load-bar 1.5s ease forwards;
}

/* Composited (scaleX, not width) so it's smooth on a single play and
   flicker-free if any context loops it. */
@keyframes load-bar {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ==========================================================================
   PRELOADER — PER-VARIANT STYLES (selected via #tc-preloader[data-style])
   ========================================================================== */

#tc-preloader[data-style] .preloader-inner { color: #fff; }

/* ── patch_cable — SVG-free cable that slides across, plug "snaps in" ──── */
.preloader-cable-track {
    position: relative;
    width: min(360px, 70vw);
    height: 48px;
    display: flex;
    align-items: center;
}
.preloader-cable-port {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 28px;
    background: linear-gradient(180deg, #1a2a40 0%, #0a1422 100%);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -10px 0 rgba(0,0,0,0.35);
}
.preloader-cable-port::before {
    content: '';
    position: absolute;
    left: 4px; right: 4px; bottom: 6px;
    height: 4px;
    background: rgba(0,0,0,0.6);
    border-radius: 1px;
}
.preloader-cable-port--left  { left: 0; }
.preloader-cable-port--right { right: 0; }
.preloader-cable-port--right::after {
    content: '';
    position: absolute;
    top: 2px; right: 3px;
    width: 5px; height: 5px;
    background: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(239,68,68,0.8);
    animation: tc-cable-led 1.4s steps(2) infinite;
}
@keyframes tc-cable-led { 50% { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.9); } }

.preloader-cable-strand {
    position: absolute;
    top: 50%;
    left: 0;
    width: 220px;
    transform: translate(-100%, -50%);
    display: flex;
    align-items: center;
    height: 18px;
    animation: tc-cable-slide 3s cubic-bezier(.65, 0, .35, 1) infinite;
}
.preloader-cable-plug {
    width: 18px;
    height: 24px;
    background: linear-gradient(180deg, #475569 0%, #1e293b 100%);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
    position: relative;
}
.preloader-cable-plug::before {
    content: '';
    position: absolute;
    top: 4px; left: 3px; right: 3px;
    height: 4px;
    background: #d4d4d8;
    border-radius: 1px;
}
.preloader-cable-plug--left { border-radius: 6px 3px 3px 6px; }
.preloader-cable-plug--right { border-radius: 3px 6px 6px 3px; }
.preloader-cable-wire {
    flex: 1;
    height: 6px;
    background: linear-gradient(180deg, var(--tc-primary) 0%, var(--tc-primary-dark) 50%, var(--tc-primary) 100%);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(10,102,194,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
@keyframes tc-cable-slide {
    0%   { left: 0;    transform: translate(-100%, -50%); }
    55%  { left: calc(100% + 18px); transform: translate(-100%, -50%); }
    70%, 100% { left: calc(100% + 18px); transform: translate(-100%, -50%); }
}
.preloader-status {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
}

/* ── terminal — typed `boot` line then OK lines fade in ────────────────── */
.preloader-terminal { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.preloader-term-block {
    margin: 0;
    text-align: left;
    color: #c8ffd7;
    font-size: 13px;
    line-height: 1.7;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(0,255,127,0.20);
    border-radius: 6px;
    padding: 18px 22px;
    min-width: min(420px, 80vw);
}
.preloader-term-line { display: block; opacity: 0; }
.preloader-term-line:nth-child(1) { animation: tc-term-show 0.01s linear forwards; }
.preloader-term-line:nth-child(2) { animation: tc-term-show 0.4s linear 0.9s forwards; }
.preloader-term-line:nth-child(3) { animation: tc-term-show 0.4s linear 1.5s forwards; }
.preloader-term-line:nth-child(4) { animation: tc-term-show 0.4s linear 2.1s forwards; }
.preloader-term-line--ok { color: rgba(180,255,210,0.85); }
.preloader-term-line--ok::first-line { color: #6bffaa; }
.preloader-term-typed {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid transparent;
    vertical-align: bottom;
    width: 0;
    animation: tc-term-type 0.7s steps(20) 0.1s forwards;
}
.preloader-term-typed::before { content: attr(data-text); }
.preloader-term-caret {
    display: inline-block;
    color: #6bffaa;
    animation: tc-term-blink 0.9s steps(2) infinite;
}
@keyframes tc-term-show { to { opacity: 1; } }
@keyframes tc-term-type { to { width: 100%; } }
@keyframes tc-term-blink { 50% { opacity: 0; } }

/* ── pulse — three concentric rings expanding from logo ──────────────── */
.preloader-pulse {
    position: relative;
    width: 220px; height: 220px;
    justify-content: center;
}
.preloader-pulse .preloader-logo-text {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2;
}
.preloader-pulse-core {
    position: absolute;
    inset: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    background: linear-gradient(135deg, var(--tc-primary), var(--tc-secondary));
    border-radius: 50%;
    z-index: 1;
}
.preloader-pulse-ring {
    position: absolute;
    inset: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid var(--tc-primary);
    border-radius: 50%;
    opacity: 0;
    animation: tc-pulse-out 2.2s ease-out infinite;
}
.preloader-pulse-ring--2 { animation-delay: 0.7s; }
.preloader-pulse-ring--3 { animation-delay: 1.4s; }
@keyframes tc-pulse-out {
    0%   { transform: scale(1);  opacity: 0.9; border-color: var(--tc-secondary); }
    80%  { opacity: 0.05; }
    100% { transform: scale(11); opacity: 0; border-color: var(--tc-primary); }
}

/* ── dots — 3 bouncing dots ────────────────────────────────────────────── */
.preloader-dots .preloader-dot-row {
    display: flex;
    gap: 12px;
}
.preloader-dots .preloader-dot-row span {
    display: block;
    width: 14px; height: 14px;
    background: linear-gradient(135deg, var(--tc-primary), var(--tc-secondary));
    border-radius: 50%;
    animation: tc-dot-bounce 1.2s ease-in-out infinite;
}
.preloader-dots .preloader-dot-row span:nth-child(2) { animation-delay: 0.15s; }
.preloader-dots .preloader-dot-row span:nth-child(3) { animation-delay: 0.30s; }
@keyframes tc-dot-bounce {
    0%, 80%, 100% { transform: translateY(0);    opacity: 0.55; }
    40%           { transform: translateY(-14px); opacity: 1; }
}

/* ── spinner — gradient ring rotating around the logo ──────────────────── */
.preloader-spinner { position: relative; }
.preloader-spin-ring {
    width: 92px; height: 92px;
    border: 4px solid transparent;
    border-top-color: var(--tc-primary);
    border-right-color: var(--tc-secondary);
    border-radius: 50%;
    animation: tc-spin-ring 1.1s linear infinite;
    position: relative;
}
.preloader-spin-ring::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 1px dashed rgba(255,255,255,0.10);
    border-radius: 50%;
    animation: tc-spin-ring 6s linear infinite reverse;
}
@keyframes tc-spin-ring { to { transform: rotate(360deg); } }

/* ── progress_stack — 4 horizontal bars filling at staggered times ─────── */
.preloader-stack .preloader-stack-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(280px, 70vw);
}
.preloader-stack-bar {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.preloader-stack-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--tc-primary), var(--tc-secondary));
    border-radius: 3px;
    animation: tc-stack-fill 1.4s cubic-bezier(.4,0,.2,1) infinite;
}
.preloader-stack-bar:nth-child(1) i { animation-delay: 0.0s; }
.preloader-stack-bar:nth-child(2) i { animation-delay: 0.15s; }
.preloader-stack-bar:nth-child(3) i { animation-delay: 0.30s; }
.preloader-stack-bar:nth-child(4) i { animation-delay: 0.45s; }
@keyframes tc-stack-fill {
    0%       { width: 0;    opacity: 1; }
    65%      { width: 100%; opacity: 1; }
    85%, 100%{ width: 100%; opacity: 0; }
}

/* ── wifi — 3 arcs animating outward + center dot ──────────────────────── */
.preloader-wifi-stack {
    position: relative;
    width: 90px; height: 70px;
}
.preloader-wifi-arc {
    position: absolute;
    bottom: 14px;
    left: 50%;
    border-radius: 50%;
    border: 3px solid var(--tc-secondary);
    border-bottom: 0;
    border-left-color: transparent;
    border-right-color: transparent;
    opacity: 0;
    animation: tc-wifi 1.8s ease-out infinite;
}
.preloader-wifi-arc--1 { width: 22px; height: 12px; margin-left: -11px; }
.preloader-wifi-arc--2 { width: 44px; height: 24px; margin-left: -22px; animation-delay: 0.3s; }
.preloader-wifi-arc--3 { width: 66px; height: 36px; margin-left: -33px; animation-delay: 0.6s; }
.preloader-wifi-dot {
    position: absolute;
    bottom: 8px; left: 50%;
    width: 8px; height: 8px;
    margin-left: -4px;
    background: var(--tc-secondary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--tc-secondary);
}
@keyframes tc-wifi {
    0%, 50%, 100% { opacity: 0; transform: scale(0.85); }
    25%           { opacity: 1; transform: scale(1); }
}

/* ── led_strip — 8 LED cells lighting in a chase pattern ───────────────── */
.preloader-led .preloader-led-rack {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.preloader-led-cell {
    width: 10px; height: 24px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    animation: tc-led-chase 1.6s ease-in-out infinite;
}
.preloader-led-cell:nth-child(1) { animation-delay: 0.0s; }
.preloader-led-cell:nth-child(2) { animation-delay: 0.10s; }
.preloader-led-cell:nth-child(3) { animation-delay: 0.20s; }
.preloader-led-cell:nth-child(4) { animation-delay: 0.30s; }
.preloader-led-cell:nth-child(5) { animation-delay: 0.40s; }
.preloader-led-cell:nth-child(6) { animation-delay: 0.50s; }
.preloader-led-cell:nth-child(7) { animation-delay: 0.60s; }
.preloader-led-cell:nth-child(8) { animation-delay: 0.70s; }
@keyframes tc-led-chase {
    0%, 60%, 100% { background: rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
    30%           { background: var(--tc-secondary); box-shadow: 0 0 10px var(--tc-secondary); }
}

/* ── matrix_rain — authentic falling-glyph "digital rain" on <canvas> ─────
   The real cascade (katakana + numerals, bright heads, fading green trails)
   is drawn by a small self-contained script emitted alongside the canvas —
   see revdash_matrix_rain_script() in inc/loading-screens.php — so it runs
   identically on the live preloader and the standalone admin preview, neither
   of which shares main.js. CSS owns only the dark backdrop + canvas sizing. */
.preloader-matrix {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #050b08;
}
.preloader-matrix-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* Belt-and-suspenders: every text node inside the preloader is white by
   default. The theme's body color is dark, which would render preloader
   text invisible on the dark backdrop (especially in the standalone
   preview page which loads this same stylesheet). */
#tc-preloader .preloader-inner,
#tc-preloader .preloader-inner > *,
#tc-preloader .preloader-logo-text { color: #fff; }
#tc-preloader .preloader-status { color: rgba(255, 255, 255, 0.55); }
#tc-preloader .preloader-term-block,
#tc-preloader .preloader-term-block * { color: #c8ffd7; }
#tc-preloader .preloader-term-line--ok { color: rgba(180, 255, 210, 0.85); }

/* ==========================================================================
   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(--tc-primary); color: var(--tc-white); }
::-moz-selection { background: var(--tc-primary); color: var(--tc-white); }

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

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

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--tc-gray-light); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--tc-primary), var(--tc-secondary));
    border-radius: 8px;
    border: 3px solid var(--tc-gray-light);
}
::-webkit-scrollbar-thumb:hover { background: var(--tc-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: tc-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 tc-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   HERO — Aurora mesh + floating glow orbs + animated gradient title
   ========================================================================== */
.tc-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(--tc-dark) 45%, #0a2540 100%);
}

.tc-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) {
    .tc-hero-fallback::before {
        animation: tc-orb-drift 22s ease-in-out infinite alternate;
    }
}

@keyframes tc-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); }
}

.tc-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: tc-pulse-glow 7s ease-in-out infinite; }
}

@keyframes tc-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: tc-shimmer 6s linear infinite; }
}

@keyframes tc-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 */
.tc-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;
}
.tc-hero-fallback .container::before {
    content: '';
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--tc-secondary);
    border-radius: 2px;
    pointer-events: none;
}
.tc-hero-fallback .container { position: relative; }
@media (prefers-reduced-motion: no-preference) {
    .tc-hero-fallback .container::before { animation: tc-scroll-hint 2.2s ease-in-out infinite; }
}
@keyframes tc-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) {
    .tc-hero-fallback .container::after,
    .tc-hero-fallback .container::before { display: none; }
}

/* ==========================================================================
   SERVICES — Glassmorphic cards with gradient borders
   ========================================================================== */
.services-section {
    background: linear-gradient(180deg, var(--tc-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(--tc-radius-lg);
    padding: 1.5px;
    background: linear-gradient(135deg, transparent 25%, var(--tc-primary) 60%, var(--tc-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(--tc-primary), var(--tc-secondary));
    color: var(--tc-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(--tc-radius-lg);
    transition: var(--tc-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(--tc-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(--tc-primary), var(--tc-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(--tc-primary), var(--tc-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(--tc-primary); }

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

.tech-logo-item::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--tc-radius-lg) + 2px);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--tc-primary) 80deg,
        var(--tc-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: tc-spin 4s linear infinite; }
}

@keyframes tc-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(--tc-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(--tc-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(--tc-primary), var(--tc-secondary));
    box-shadow: 0 8px 18px -6px rgba(10, 102, 194, 0.45);
    border: 2px solid var(--tc-white);
}

/* ==========================================================================
   BLOG — Image zoom + premium card
   ========================================================================== */
.blog-card { position: relative; }
.blog-card > a { display: block; overflow: hidden; border-radius: var(--tc-radius-lg) var(--tc-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(--tc-primary), var(--tc-primary-light));
    color: var(--tc-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(--tc-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(--tc-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(--tc-radius-lg);
    transition: var(--tc-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(--tc-transition);
}

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

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

.contact-form::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--tc-radius-lg);
    padding: 1px;
    background: linear-gradient(135deg, var(--tc-primary), transparent 50%, var(--tc-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(--tc-white);
    border-color: var(--tc-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 (--tc-btn-hover) wins when set;
       otherwise fall back to the default gradient flip. */
    background: var(--tc-btn-hover, linear-gradient(135deg, var(--tc-primary-dark) 0%, var(--tc-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(--tc-primary), var(--tc-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

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

/* ==========================================================================
   ACCESSIBILITY — Honor reduced motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    /* Honor reduced motion globally — except the preloader subtree.
       The live-site preloader is a brief overlay; the dashboard "Preview ↗"
       is a deliberate admin action requesting to SEE the animation. Killing
       these animations would make every variant render frozen at its final
       keyframe — visually indistinguishable from "broken". */
    *:not(#tc-preloader, #tc-preloader *),
    *:not(#tc-preloader, #tc-preloader *)::before,
    *:not(#tc-preloader, #tc-preloader *)::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 `tc-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.tc-rev-services,
.rb-section.tc-rev-features,
.rb-section.tc-rev-process,
.rb-section.tc-rev-tech,
.rb-section.tc-rev-testimonials,
.rb-section.tc-rev-blog,
.rb-section.tc-rev-cta,
.rb-section.tc-rev-contact,
.rb-section.tc-rev-section-header {
    width: 100%;
}

.rb-section.tc-rev-services > .rb-section__inner,
.rb-section.tc-rev-features > .rb-section__inner,
.rb-section.tc-rev-process > .rb-section__inner,
.rb-section.tc-rev-tech > .rb-section__inner,
.rb-section.tc-rev-testimonials > .rb-section__inner,
.rb-section.tc-rev-blog > .rb-section__inner,
.rb-section.tc-rev-cta > .rb-section__inner,
.rb-section.tc-rev-contact > .rb-section__inner,
.rb-section.tc-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 --- */
.tc-rev-eyebrow .rb-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0 0 0.5rem;
    background: linear-gradient(135deg, var(--tc-primary), var(--tc-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tc-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;
}
.tc-rev-lead .rb-text {
    font-size: 1.05rem;
    max-width: 640px;
    line-height: 1.75;
    margin: 0 auto;
}
.tc-rev-section-header > .rb-section__inner { padding-bottom: 8px; flex-direction: column; align-items: center; }
.tc-rev-section-header .rb-column { text-align: center; width: 100% !important; flex: 1 1 100%; }

/* On-dark variant for features section eyebrow */
.tc-rev-on-dark .tc-rev-eyebrow .rb-heading {
    background: linear-gradient(135deg, var(--tc-secondary), var(--tc-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.tc-rev-services {
    background:
        linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) !important;
    position: relative;
    overflow: hidden;
}
.rb-section.tc-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.tc-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.tc-rev-services > .rb-section__inner { position: relative; z-index: 1; }

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

.rb-section.tc-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(--tc-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(--tc-transition);
}
.rb-section.tc-rev-services .rb-widget--icon_box:hover .rb-iconbox__icon-wrap {
    background: linear-gradient(135deg, var(--tc-primary), var(--tc-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.tc-rev-services .rb-widget--icon_box:hover .rb-iconbox__icon--svg svg { fill: #ffffff !important; }
.rb-section.tc-rev-services .rb-iconbox__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tc-dark);
    margin: 1rem 0 0.5rem;
}
.rb-section.tc-rev-services .rb-iconbox__body {
    font-size: 0.92rem;
    color: var(--tc-gray);
    line-height: 1.7;
}

/* --- Stats strip (animated grid + glow over the primary background) --- */
.rb-section.tc-rev-section-header + .rb-section.tc-rev-services,
.rb-section.tc-rev-section-header + .rb-section.tc-rev-tech,
.rb-section.tc-rev-section-header + .rb-section.tc-rev-testimonials,
.rb-section.tc-rev-section-header + .rb-section.tc-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(--tc-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.tc-rev-features,
.rb-section.tc-rev-cta {
    position: relative;
    overflow: hidden;
    color: var(--tc-white);
}

/* --- Features (Why us) section: dark with aurora glow + shine on icons --- */
.rb-section.tc-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(--tc-dark) 0%, var(--tc-dark-alt) 100%) !important;
}
.rb-section.tc-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.tc-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.tc-rev-features > .rb-section__inner { position: relative; z-index: 1; }

.rb-section.tc-rev-features .tc-rev-feature-item {
    background: transparent;
    border-radius: var(--tc-radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 0.5rem;
    transition: var(--tc-transition);
    border: 1px solid transparent;
}
.rb-section.tc-rev-features .tc-rev-feature-item:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
.rb-section.tc-rev-features .tc-rev-feature-item .rb-iconbox__icon-wrap {
    background: linear-gradient(135deg, var(--tc-primary), var(--tc-secondary)) !important;
    width: 48px;
    height: 48px;
    border-radius: var(--tc-radius);
    box-shadow: 0 10px 30px -10px rgba(10,102,194,0.6);
    overflow: hidden;
    position: relative;
}
.rb-section.tc-rev-features .tc-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.tc-rev-features .tc-rev-feature-item .rb-iconbox__title { color: #ffffff !important; font-size: 1.05rem; margin: 0 0 0.4rem; }
.rb-section.tc-rev-features .tc-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.tc-rev-features .rb-widget--button .rb-button.tc-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.tc-rev-process {
    background: var(--tc-gray-light) !important;
    position: relative;
    overflow: hidden;
}
.rb-section.tc-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.tc-rev-process > .rb-section__inner { position: relative; z-index: 1; align-items: flex-start; }

.rb-section.tc-rev-process .tc-rev-process-step {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--tc-border);
    margin: 0;
    background: transparent;
}
.rb-section.tc-rev-process .tc-rev-process-step:last-child { border-bottom: 0; }
.rb-section.tc-rev-process .tc-rev-process-step .rb-iconbox__icon-wrap {
    transition: transform 0.4s cubic-bezier(.16, 1, .3, 1);
}
.rb-section.tc-rev-process .tc-rev-process-step:hover .rb-iconbox__icon-wrap {
    transform: scale(1.12) rotate(8deg);
}
.rb-section.tc-rev-process .tc-rev-process-step .rb-iconbox__title {
    font-size: 1.15rem;
    margin: 0 0 0.4rem;
    color: var(--tc-dark);
    transition: color 0.25s ease;
}
.rb-section.tc-rev-process .tc-rev-process-step:hover .rb-iconbox__title { color: var(--tc-primary); }
.rb-section.tc-rev-process .tc-rev-process-step .rb-iconbox__body { color: var(--tc-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.tc-rev-tech .rb-column {
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
}
.rb-section.tc-rev-tech .tc-rev-tech-item {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-lg);
    padding: 1.25rem 1rem;
    transition: var(--tc-transition);
    position: relative;
    isolation: isolate;
    margin: 0;
}
.rb-section.tc-rev-tech .tc-rev-tech-item::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--tc-radius-lg) + 2px);
    background: conic-gradient(from 0deg, transparent 0deg, var(--tc-primary) 80deg, var(--tc-secondary) 180deg, transparent 270deg);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}
@media (prefers-reduced-motion: no-preference) {
    .rb-section.tc-rev-tech .tc-rev-tech-item:hover::before { animation: tc-spin 4s linear infinite; }
}
.rb-section.tc-rev-tech .tc-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.tc-rev-tech .tc-rev-tech-item:hover::before { opacity: 0.4; }
.rb-section.tc-rev-tech .tc-rev-tech-item .rb-iconbox__icon-wrap {
    color: var(--tc-gray);
    transition: transform 0.35s ease, color 0.25s ease;
}
.rb-section.tc-rev-tech .tc-rev-tech-item:hover .rb-iconbox__icon-wrap {
    transform: scale(1.18);
    color: var(--tc-primary);
}
.rb-section.tc-rev-tech .tc-rev-tech-item .rb-iconbox__icon--svg svg { fill: currentColor; transition: fill 0.25s ease; }
.rb-section.tc-rev-tech .tc-rev-tech-item .rb-iconbox__title {
    font-size: 0.75rem !important;
    font-weight: 600;
    color: var(--tc-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0.5rem 0 0;
}

/* --- Testimonials: 3-up cards w/ quote watermark --- */
.rb-section.tc-rev-testimonials {
    background: var(--tc-gray-light) !important;
    position: relative;
    overflow: hidden;
}
.rb-section.tc-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.tc-rev-testimonials > .rb-section__inner { position: relative; z-index: 1; }

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

/* --- Blog grid: rb recent_posts laid out as 3-up cards --- */
.rb-section.tc-rev-blog { background: var(--tc-white) !important; }
.rb-section.tc-rev-blog .tc-rev-blog-list ul,
.rb-section.tc-rev-blog .tc-rev-blog-list ol,
.rb-section.tc-rev-blog .rb-widget--recent_posts > div,
.rb-section.tc-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.tc-rev-blog .tc-rev-blog-list ul,
    .rb-section.tc-rev-blog .rb-widget--recent_posts ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .rb-section.tc-rev-blog .tc-rev-blog-list ul,
    .rb-section.tc-rev-blog .rb-widget--recent_posts ul { grid-template-columns: 1fr; }
}
.rb-section.tc-rev-blog .rb-widget--recent_posts li {
    background: var(--tc-white);
    border-radius: var(--tc-radius-lg);
    overflow: hidden;
    border: 1px solid var(--tc-border);
    transition: var(--tc-transition);
    padding: 1.5rem;
}
.rb-section.tc-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.tc-rev-blog .rb-widget--recent_posts li a {
    font-weight: 700;
    color: var(--tc-dark);
    line-height: 1.4;
    text-decoration: none;
}
.rb-section.tc-rev-blog .rb-widget--recent_posts li:hover a { color: var(--tc-primary); }

/* --- CTA band: dark with layered glow + mesh + gradient headline --- */
.rb-section.tc-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(--tc-dark) 50%, #0a2540 100%) !important;
    text-align: center;
}
.rb-section.tc-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.tc-rev-cta > .rb-section__inner { position: relative; z-index: 1; }
.rb-section.tc-rev-cta .rb-cta {
    background: transparent !important;
    color: var(--tc-white);
    padding: 1rem 0;
    border-radius: 0;
}
.rb-section.tc-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.tc-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.tc-rev-contact {
    background: linear-gradient(180deg, var(--tc-white) 0%, #fafbfd 100%) !important;
    position: relative;
    overflow: hidden;
}
.rb-section.tc-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.tc-rev-contact > .rb-section__inner { position: relative; z-index: 1; align-items: flex-start; }

.rb-section.tc-rev-contact .tc-rev-contact-detail {
    background: transparent;
    border: 1px solid transparent;
    padding: 0.85rem 1rem;
    margin: 0 0 0.5rem;
    border-radius: var(--tc-radius-lg);
    transition: var(--tc-transition);
}
.rb-section.tc-rev-contact .tc-rev-contact-detail:hover {
    background: rgba(10,102,194,0.04);
    transform: translateX(6px);
}
.rb-section.tc-rev-contact .tc-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(--tc-radius);
    color: var(--tc-primary);
    transition: var(--tc-transition);
}
.rb-section.tc-rev-contact .tc-rev-contact-detail:hover .rb-iconbox__icon-wrap {
    background: linear-gradient(135deg, var(--tc-primary), var(--tc-secondary)) !important;
    transform: scale(1.1) rotate(-4deg);
    box-shadow: 0 8px 20px -6px rgba(10,102,194,0.45);
}
.rb-section.tc-rev-contact .tc-rev-contact-detail:hover .rb-iconbox__icon--svg svg { fill: #ffffff !important; }
.rb-section.tc-rev-contact .tc-rev-contact-detail .rb-iconbox__title {
    font-size: 0.9rem;
    color: var(--tc-dark);
    font-weight: 600;
    margin: 0 0 0.2rem;
}
.rb-section.tc-rev-contact .tc-rev-contact-detail .rb-iconbox__body {
    color: var(--tc-gray);
    font-size: 0.88rem;
}
.rb-section.tc-rev-contact .tc-rev-contact-form {
    background: var(--tc-white);
    padding: 2.5rem;
    border-radius: var(--tc-radius-lg);
    box-shadow: 0 24px 60px -24px rgba(10,102,194,0.18);
    border: 1px solid var(--tc-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;
}
/* 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.tc-rev-services .rb-column,
    .rb-section.tc-rev-testimonials .rb-column {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .rb-section.tc-rev-tech .rb-column {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .rb-section.tc-rev-features > .rb-section__inner,
    .rb-section.tc-rev-process > .rb-section__inner,
    .rb-section.tc-rev-contact > .rb-section__inner {
        flex-direction: column;
    }
    .rb-section.tc-rev-features .rb-column,
    .rb-section.tc-rev-process .rb-column,
    .rb-section.tc-rev-contact .rb-column {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
@media (max-width: 640px) {
    .rb-section.tc-rev-services .rb-column,
    .rb-section.tc-rev-testimonials .rb-column {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .rb-section.tc-rev-tech .rb-column {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}