/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin.
Version: 3.4.6.1770684935
Updated: 2026-03-03 00:00:00
*/

/* ============================================
   ThIRU Labs — Custom CSS
   Last updated: 16/3/2026
   ============================================ */


/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');


/* ── BRAND TOKENS ────────────────────────────────────────────
   Central colour palette — reference everywhere via var()
   Defined on both :root and body to ensure availability
   inside Elementor's editor iframe and all page contexts. */

:root {
    --red-primary: #C41E1E;
    --red-dark:    #8B0000;
    --red-bright:  #E63946;
    --black:       #000000;
    --grey-900:    #0A0A0A;
    --grey-800:    #1A1A1A;
    --grey-700:    #2A2A2A;
    --grey-300:    #B0B0B0;
    --white:       #FFFFFF;
    --off-white:   #F5F5F5;
}


/* ── GLOBAL ──────────────────────────────────────────────────*/

body {
    font-family: 'Outfit', sans-serif;
    /* Brand tokens also declared on body as fallback for
       Elementor editor iframe which may not inherit :root */
    --red-primary: #C41E1E;
    --red-dark:    #8B0000;
    --red-bright:  #E63946;
    --black:       #000000;
    --grey-900:    #0A0A0A;
    --grey-800:    #1A1A1A;
    --grey-700:    #2A2A2A;
    --grey-300:    #B0B0B0;
    --white:       #FFFFFF;
    --off-white:   #F5F5F5;
}

/* ── GLOBAL DARK THEME ───────────────────────────────────────
   Dark background and text colour applied site-wide via body.
   No per-page IDs needed — applies to all pages automatically.
   ──────────────────────────────────────────────────────────── */

body {
    background: var(--black);
    color: var(--white);
}

/* ── MAX-WIDTH CONTAINERS ────────────────────────────────────
   Keeps all page content capped at 1800px.
   NOTE: .e-con is scoped to .e-parent only — child column
   containers carry .e-child, and margin:auto on flex children
   collapses multi-column layouts. */

.elementor-section > .elementor-container,
.elementor-container,
.e-container,
.e-con.e-parent {
    max-width: 1800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.elementor-inner-section > .elementor-container {
    max-width: 1800px !important;
}


/* ============================================
   NAVIGATION
   ============================================ */

.thiru-nav-transparent {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(20px);
}

.thiru-nav-transparent .elementor-nav-menu a {
    position: relative;
}

.thiru-nav-transparent .elementor-nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright));
    transition: width 0.3s ease;
}

.thiru-nav-transparent .elementor-nav-menu a:hover::after {
    width: 100%;
}


/* ============================================
   BUTTONS
   ============================================ */

/* Primary — red gradient */
.thiru-cta-button {
    padding: 0.75rem 2rem !important;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark)) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: inline-block;
}

/* Primary small — for header/nav */
.thiru-cta-button-small {
    padding: 0.5rem 1.5rem !important;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark)) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: inline-block !important;
    min-height: auto !important;
    height: auto !important;
    width: auto !important;
    max-width: fit-content !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

.thiru-cta-button-small .elementor-button {
    padding: 0 !important;
    line-height: 1 !important;
    width: auto !important;
}

.thiru-cta-button-small a {
    padding: 0.5rem 1.5rem !important;
    line-height: 1 !important;
    width: auto !important;
    display: inline-block !important;
}

/* Shimmer sweep on primary buttons */
.thiru-cta-button::before,
.thiru-cta-button-small::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.thiru-cta-button:hover::before,
.thiru-cta-button-small:hover::before {
    left: 100%;
}

.thiru-cta-button:hover,
.thiru-cta-button-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(196, 30, 30, 0.4) !important;
}

/* Secondary — outlined */
.thiru-secondary-button {
    padding: 0.75rem 2rem !important;
    background: transparent !important;
    color: var(--white) !important;
    border: 2px solid var(--red-primary) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
}

.thiru-secondary-button:hover {
    background: rgba(196, 30, 30, 0.1) !important;
    transform: translateY(-2px);
}

/* White CTA — for use on gradient/coloured background sections */
.thiru-cta-button-white {
    padding: 1rem 2rem !important;
    background: var(--white) !important;
    color: var(--red-primary) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.thiru-cta-button-white:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
    color: var(--red-primary) !important;
}

/* Button aliases — standalone <a> tags (not Elementor widgets) */
.thiru-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.85rem 2rem;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.2s;
}

.thiru-btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.4s;
}

.thiru-btn-primary:hover::before { left: 100%; }

.thiru-btn-primary:hover {
    box-shadow: 0 10px 30px rgba(196,30,30,0.45);
    transform: translateY(-2px);
    color: var(--white);
}

.thiru-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.85rem 2rem;
    background: transparent;
    color: var(--white);
    border: 2px solid var(--red-primary);
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s, box-shadow 0.25s, transform 0.2s;
}

.thiru-btn-secondary:hover {
    background: rgba(196,30,30,0.12);
    box-shadow: 0 8px 24px rgba(196,30,30,0.25);
    transform: translateY(-2px);
    color: var(--white);
}

/* Outlined secondary — white border variant for dark gradient sections */
.btn-outline-white {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: #CCC; text-decoration: none;
    padding: 0.85rem 2rem; font-weight: 600; font-size: 0.9rem;
    border-radius: 8px; letter-spacing: 0.04em;
    border: 2px solid rgba(255,255,255,0.2); transition: all 0.25s;
    font-family: 'Outfit', sans-serif;
}
.btn-outline-white:hover { border-color: rgba(255,255,255,0.5); color: #fff; }

/* Catalog page button aliases */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transition: left 0.5s ease;
}
.btn-primary:hover::before { left: 100%; }
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(196,30,30,0.4);
    color: var(--white);
    text-decoration: none;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    background: transparent;
    color: var(--white);
    border: 2px solid var(--red-primary);
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    background: rgba(196,30,30,0.12);
    transform: translateY(-2px);
    color: var(--white);
    text-decoration: none;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    background: transparent;
    color: var(--grey-300);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s;
}
.btn-ghost:hover {
    border-color: rgba(255,255,255,0.35);
    color: var(--white);
    text-decoration: none;
}

/* Responsive — keep small button inline on all breakpoints */
@media (max-width: 1024px) {
    .thiru-cta-button-small {
        width: auto !important;
        max-width: fit-content !important;
    }
}

@media (max-width: 768px) {
    .thiru-cta-button-small {
        width: auto !important;
        max-width: fit-content !important;
    }
}


/* ============================================
   HERO SECTIONS
   ============================================ */

/* ── Shared hero base ────────────────────────────────────────
   Used by .thiru-hero-section (general pages) and
   .thiru-enterprise-hero (Enterprise page).

   All visual effects (glow, pulse, red bar) are applied to
   .e-con-inner rather than the parent container. This avoids
   conflict with Elementor's ::before background system, which
   targets the parent element directly whenever a background
   is set in the Elementor Style tab. ── */

.thiru-hero-section,
.thiru-enterprise-hero {
    min-height: 60vh;
    position: relative;
    overflow: hidden;
}

/* Radial glow background — on e-con-inner::before, safe from Elementor */
.thiru-hero-section > .e-con-inner::before,
.thiru-hero-section > .elementor-container::before,
.thiru-enterprise-hero > .e-con-inner::before,
.thiru-enterprise-hero > .elementor-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top right,   var(--hero-glow-tl, rgba(196,30,30,0.18)) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left,  var(--hero-glow-br, rgba(139,0,0,0.12))  0%, transparent 50%),
        linear-gradient(180deg, var(--black) 0%, var(--grey-900) 100%);
    z-index: 0;
    pointer-events: none;
}

/* Pulsing centre glow + 3px red top bar — both on e-con-inner::after */
.thiru-hero-section > .e-con-inner::after,
.thiru-hero-section > .elementor-container::after,
.thiru-enterprise-hero > .e-con-inner::after,
.thiru-enterprise-hero > .elementor-container::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: var(--hero-pulse-size, 1000px);
    height: var(--hero-pulse-size, 1000px);
    background: radial-gradient(circle, var(--hero-pulse-opacity, rgba(196,30,30,0.06)) 0%, transparent 70%);
    z-index: 0;
    animation: thiru-pulse 8s ease-in-out infinite;
    pointer-events: none;
}

/* 3px red gradient bar — injected as a box-shadow on e-con-inner
   so it doesn't consume either pseudo-element slot */
.thiru-hero-section > .e-con-inner,
.thiru-hero-section > .elementor-container,
.thiru-enterprise-hero > .e-con-inner,
.thiru-enterprise-hero > .elementor-container {
    position: relative;
    z-index: 1;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--red-dark), var(--red-primary), var(--red-bright), var(--red-primary), var(--red-dark)) 1;
}

/* Lift all Elementor content above pseudo-element overlays */
.thiru-hero-section .elementor-container,
.thiru-hero-section .elementor-column,
.thiru-hero-section .elementor-widget,
.thiru-hero-section .elementor-element,
.thiru-hero-section .e-con-inner,
.thiru-enterprise-hero .elementor-container,
.thiru-enterprise-hero .elementor-column,
.thiru-enterprise-hero .elementor-widget,
.thiru-enterprise-hero .elementor-element,
.thiru-enterprise-hero .e-con-inner {
    position: relative;
    z-index: 1;
}

/* Ensure buttons are always clickable */
.thiru-hero-section .elementor-button-wrapper,
.thiru-hero-section .thiru-cta-button,
.thiru-hero-section .thiru-secondary-button,
.thiru-hero-section a,
.thiru-enterprise-hero .elementor-button-wrapper,
.thiru-enterprise-hero .thiru-cta-button,
.thiru-enterprise-hero .thiru-secondary-button,
.thiru-enterprise-hero a {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

/* Per-class overrides */
/* padding-top removed — nav is position:sticky (overlays content, doesn't
   push it down). All hero spacing is controlled by .thiru-hero-pad. */
.thiru-hero-section {
    padding-top: 0;
}

.thiru-enterprise-hero {
    --hero-glow-tl:       rgba(196,30,30,0.18);
    --hero-glow-br:       rgba(139,0,0,0.12);
    --hero-pulse-size:    1000px;
    --hero-pulse-opacity: rgba(196,30,30,0.06);
}

/* ── Reusable hero background utility ────────────────────────
   Apply .thiru-hero-bg to any section needing the dark
   red-glow background without the pulse animation. */
.thiru-hero-bg > .e-con-inner::before,
.thiru-hero-bg > .elementor-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top left,    rgba(196,30,30,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(139,0,0,0.12)  0%, transparent 50%),
        linear-gradient(180deg, var(--black) 0%, var(--grey-900) 100%);
    z-index: 0;
    pointer-events: none;
}

.thiru-hero-bg > .e-con-inner,
.thiru-hero-bg > .elementor-container {
    position: relative;
    z-index: 1;
}

/* ── thiru-hero-border — kept for backward compatibility ─────
   No longer needed when using .thiru-hero-section (border is
   now built in via box-shadow). Retained so existing pages
   that still carry the class don't break. ── */

.thiru-hero-border > .e-con-inner,
.thiru-hero-border > .elementor-container {
    position: relative;
}


/* ============================================
   TEXT EFFECTS & TYPOGRAPHY
   ============================================ */

/* White-to-grey gradient heading */
.thiru-gradient-text,
.thiru-gradient-text .elementor-heading-title {
    background: linear-gradient(135deg, var(--white) 0%, var(--grey-300) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Red gradient accent heading */
.thiru-gradient-accent,
.thiru-gradient-accent .elementor-heading-title,
.elementor-heading-title .thiru-gradient-accent,
.elementor-heading-title span.thiru-gradient-accent {
    background: linear-gradient(135deg, var(--red-primary), var(--red-bright)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Red gradient text utility (standalone, non-Elementor) */
.thiru-red-accent .elementor-heading-title,
.thiru-red-accent {
    background: linear-gradient(135deg, var(--red-primary), var(--red-bright)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* White→red gradient — catalog hero variant */
.gradient-text {
    background: linear-gradient(135deg, var(--white) 30%, var(--red-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section label — small red ALL CAPS eyebrow (Outfit font) */
.thiru-section-label {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--red-primary);
    margin-bottom: 1rem;
}

/* Monospace label — JetBrains Mono for // code-style annotations */
.thiru-mono-label,
.thiru-mono-label p,
.thiru-mono-label .elementor-widget-container p {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--red-primary);
}

/* Hero label — slightly larger mono label used above hero H1s */
.hero-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--red-primary);
    margin-bottom: 1.25rem;
}

/* Hero H1 — base size (overridden per-section below) */
.hero-title {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.08;
    margin-bottom: 1.75rem;
}

/* pIC0 hero subtitle */
.pic0-hero-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--off-white);
    margin-bottom: 0.75rem;
}

/* Section eyebrow with decorative red line */
.section-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.25em;
    color: var(--red-primary);
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 1rem;
}
.section-eyebrow::before {
    content: ''; width: 20px; height: 2px;
    background: var(--red-primary); flex-shrink: 0;
}

/* Section divider bar */
.section-divider {
    width: 56px; height: 3px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright));
    margin: 1.5rem 0;
}

/* Member role bullet */
.thiru-role-label::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--red-primary);
    margin-right: 8px;
    vertical-align: middle;
}

/* Divider line under names */
.thiru-name-divider {
    width: 48px; height: 2px;
    background: linear-gradient(135deg, var(--red-primary), var(--red-bright));
    margin: 1.5rem 0;
}

/* Feature tag */
.feature-tag {
    display: inline-block; margin-top: 1.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--red-primary); position: relative; z-index: 1;
}


/* ============================================
   ── CONSOLIDATED DESIGN SYSTEM ──────────────
   New reusable classes added March 2026.
   Replace per-widget Elementor settings with
   these classes via Advanced → CSS Classes.
   ============================================ */

/* ── HERO H1 SIZE ────────────────────────────────────────────
   All hero H1s use elementor-size-default. Scoping to
   .thiru-hero-section auto-sizes them — no class needed
   on the heading widget itself.
   Source/reference size: Partner page.

   HOW TO USE: Hero section already has .thiru-hero-section.
   Nothing else needed. For catalog page, add .catalog-hero
   to its section container instead.
   ──────────────────────────────────────────────────────────── */

.thiru-hero-section .elementor-heading-title,
.thiru-enterprise-hero .elementor-heading-title {
    font-size: clamp(2.8rem, 5vw, 4.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
}

/* Catalog page — slightly smaller (scoped, won't bleed to other pages) */
.catalog-hero .elementor-heading-title {
    font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
}

/* Fluid type utilities — apply directly to heading widget if needed */
.thiru-hero-h1,
.thiru-hero-h1 .elementor-heading-title {
    font-size: clamp(2.8rem, 5vw, 4.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
}

.thiru-pillar-h2,
.thiru-pillar-h2 .elementor-heading-title {
    font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.thiru-section-h2,
.thiru-section-h2 .elementor-heading-title {
    font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

/* Card / panel headings */
.thiru-section-h3,
.thiru-section-h3 .elementor-heading-title {
    font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}


/* ── HERO EYEBROW — // CODE-STYLE LABEL ──────────────────────
   HOW TO USE: Apply .thiru-eyebrow to the Text Editor widget
   containing the // eyebrow line. Clear any colour set in
   Elementor's Style → Typography → Color field.
   ──────────────────────────────────────────────────────────── */

.thiru-eyebrow,
.thiru-eyebrow p,
.thiru-eyebrow .elementor-widget-container p,
.thiru-eyebrow .elementor-widget-container,
.thiru-eyebrow.elementor-widget-text-editor .elementor-widget-container p {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    color: var(--red-primary) !important;
    margin-bottom: 1rem !important;
    line-height: 1.5 !important;
}


/* ── BODY TEXT SIZES ─────────────────────────────────────────
   Replaces per-widget font-size: 14px / color: #B0B0B0 settings.

   HOW TO USE:
   .thiru-body-lg — hero lead paragraph
   .thiru-body-md — standard section body
   .thiru-body-sm — card descriptions, captions
   Apply to the Text Editor widget. Clear inline style overrides.
   ──────────────────────────────────────────────────────────── */

.thiru-body-lg,
.thiru-body-lg p,
.thiru-body-lg .elementor-widget-container p {
    font-size: 1.1rem !important;
    color: var(--grey-300) !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
}

.thiru-body-md,
.thiru-body-md p,
.thiru-body-md .elementor-widget-container p {
    font-size: 0.95rem !important;
    color: var(--grey-300) !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
}

.thiru-body-sm,
.thiru-body-sm p,
.thiru-body-sm .elementor-widget-container p {
    font-size: 0.85rem !important;
    color: var(--grey-300) !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
}

/* Benefit list — body text with red → arrow bullets.
   Replaces inline style="padding-left:20px; position:relative"
   + absolute-positioned arrow pattern on Partner page.

   HOW TO USE: Apply to Text Editor widget containing <p> items.
   Remove inline padding/position styles from the widget. */
.thiru-benefit-list,
.thiru-benefit-list .elementor-widget-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.thiru-benefit-list p,
.thiru-benefit-list li {
    font-size: 0.95rem !important;
    color: var(--grey-300) !important;
    line-height: 1.7 !important;
    padding-left: 1.5rem !important;
    position: relative !important;
}

.thiru-benefit-list p::before,
.thiru-benefit-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--red-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    top: 0.1em;
}


/* ── SECTION PADDING UTILITIES ───────────────────────────────
   Replaces manually-set padding on every section in Elementor.

   HOW TO USE: Add one class to the outer section/container.
   Then zero out the padding fields in Elementor's Layout tab.

   .thiru-section-pad-xl  — 120px top/bottom (feature sections)
   .thiru-section-pad-lg  — 90px  top/bottom (standard sections)
   .thiru-section-pad-md  — 60px  top/bottom (compact sections)
   .thiru-section-pad-sm  — 40px  top/bottom (tight strips)
   .thiru-hero-pad        — 100px top / 80px bottom (heroes)
   ──────────────────────────────────────────────────────────── */

.thiru-section-pad-xl > .e-con-inner,
.thiru-section-pad-xl.elementor-section > .elementor-container {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
}

.thiru-section-pad-lg > .e-con-inner,
.thiru-section-pad-lg.elementor-section > .elementor-container {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

.thiru-section-pad-md > .e-con-inner,
.thiru-section-pad-md.elementor-section > .elementor-container {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.thiru-section-pad-sm > .e-con-inner,
.thiru-section-pad-sm.elementor-section > .elementor-container {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.thiru-hero-pad > .e-con-inner,
.thiru-hero-pad.elementor-section > .elementor-container {
    padding-top: 100px !important;
    padding-bottom: 80px !important;
}

@media (max-width: 1024px) {
    .thiru-section-pad-xl > .e-con-inner,
    .thiru-section-pad-xl.elementor-section > .elementor-container { padding-top: 80px !important; padding-bottom: 80px !important; }
    .thiru-section-pad-lg > .e-con-inner,
    .thiru-section-pad-lg.elementor-section > .elementor-container { padding-top: 60px !important; padding-bottom: 60px !important; }
    .thiru-section-pad-md > .e-con-inner,
    .thiru-section-pad-md.elementor-section > .elementor-container { padding-top: 40px !important; padding-bottom: 40px !important; }
    .thiru-section-pad-sm > .e-con-inner,
    .thiru-section-pad-sm.elementor-section > .elementor-container { padding-top: 24px !important; padding-bottom: 24px !important; }
    .thiru-hero-pad > .e-con-inner,
    .thiru-hero-pad.elementor-section > .elementor-container { padding-top: 70px !important; padding-bottom: 60px !important; }
}

@media (max-width: 768px) {
    .thiru-section-pad-xl > .e-con-inner,
    .thiru-section-pad-xl.elementor-section > .elementor-container { padding-top: 60px !important; padding-bottom: 60px !important; }
    .thiru-section-pad-lg > .e-con-inner,
    .thiru-section-pad-lg.elementor-section > .elementor-container { padding-top: 48px !important; padding-bottom: 48px !important; }
    .thiru-section-pad-md > .e-con-inner,
    .thiru-section-pad-md.elementor-section > .elementor-container { padding-top: 32px !important; padding-bottom: 32px !important; }
    .thiru-section-pad-sm > .e-con-inner,
    .thiru-section-pad-sm.elementor-section > .elementor-container { padding-top: 20px !important; padding-bottom: 20px !important; }
    .thiru-hero-pad > .e-con-inner,
    .thiru-hero-pad.elementor-section > .elementor-container { padding-top: 60px !important; padding-bottom: 48px !important; }
}

/* Legacy — Essentials page used this class name */
.thiru-section-pad {
    padding: 100px 2rem !important;
}


/* ── SECTION BACKGROUND UTILITIES ────────────────────────────
   Replaces manually-set backgrounds in Elementor's Style tab.

   HOW TO USE: Set Elementor background to None/Default, then
   add one of these classes to Advanced → CSS Classes.

   .thiru-bg-black     — #000 pure black
   .thiru-bg-dark      — grey-900 → black gradient (most common)
   .thiru-bg-dark-inv  — black → grey-900 (inverted)
   .thiru-bg-mid       — grey-800 solid (card sections)
   .thiru-bg-strip     — grey-900 solid (trust bars, intro strips)
   .thiru-bg-hero-glow — red ambient glow (non-hero sections)
   ──────────────────────────────────────────────────────────── */

.thiru-bg-black {
    background: var(--black) !important;
}

.thiru-bg-dark {
    background: linear-gradient(180deg, var(--grey-900) 0%, var(--black) 100%) !important;
    position: relative;
}

.thiru-bg-dark-inv {
    background: linear-gradient(180deg, var(--black) 0%, var(--grey-900) 100%) !important;
    position: relative;
}

.thiru-bg-mid {
    background: var(--grey-800) !important;
}

.thiru-bg-strip {
    background: var(--grey-900) !important;
}

.thiru-bg-hero-glow {
    position: relative;
    overflow: hidden;
}

.thiru-bg-hero-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top left,    rgba(196,30,30,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(139,0,0,0.12)  0%, transparent 50%),
        linear-gradient(180deg, var(--black) 0%, var(--grey-900) 100%);
    z-index: 0;
    pointer-events: none;
}

.thiru-bg-hero-glow > .e-con-inner,
.thiru-bg-hero-glow > .elementor-container {
    position: relative;
    z-index: 1;
}


/* ── SECTION BORDER / DIVIDER UTILITIES ──────────────────────
   HOW TO USE: Add to any section container alongside a bg class.

   .thiru-border-top-subtle    — white 5% top line
   .thiru-border-bottom-subtle — white 5% bottom line
   .thiru-border-top-red       — red gradient top line (::before)
   .thiru-border-bottom-red    — red gradient bottom line (::after)
   .thiru-border-red-pair      — faint red top + bottom
   ──────────────────────────────────────────────────────────── */

.thiru-border-top-subtle {
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.thiru-border-bottom-subtle {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.thiru-border-top-red {
    position: relative;
}

.thiru-border-top-red::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red-primary), transparent);
    pointer-events: none;
}

.thiru-border-bottom-red {
    position: relative;
}

.thiru-border-bottom-red::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red-primary), transparent);
    pointer-events: none;
}

.thiru-border-red-pair {
    border-top: 1px solid rgba(196,30,30,0.15) !important;
    border-bottom: 1px solid rgba(196,30,30,0.15) !important;
}


/* ── FORM CONSISTENCY ────────────────────────────────────────
   HOW TO USE: Apply .thiru-form-section to the section/container
   wrapping any Elementor Form widget. No per-widget changes needed.
   ──────────────────────────────────────────────────────────── */

.thiru-form-section {
    background: var(--grey-900) !important;
    position: relative;
}

.thiru-form-section .elementor-button[type="submit"],
.thiru-form-section .elementor-field-type-submit .elementor-button {
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark)) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 0.85rem 2rem !important;
    transition: box-shadow 0.3s, transform 0.2s !important;
    cursor: pointer !important;
    position: relative;
    overflow: hidden;
}

.thiru-form-section .elementor-button[type="submit"]:hover,
.thiru-form-section .elementor-field-type-submit .elementor-button:hover {
    box-shadow: 0 10px 30px rgba(196,30,30,0.4) !important;
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark)) !important;
    color: var(--white) !important;
}

.thiru-form-section .elementor-field-group {
    margin-bottom: 1.25rem !important;
}

.thiru-form-section .elementor-field-type-text input,
.thiru-form-section .elementor-field-type-email input,
.thiru-form-section .elementor-field-type-tel input,
.thiru-form-section .elementor-field-type-select select,
.thiru-form-section .elementor-field-type-textarea textarea {
    padding: 0.8rem 1.1rem !important;
    font-size: 0.95rem !important;
    min-height: 48px !important;
}

.thiru-form-section .elementor-field-type-textarea textarea {
    min-height: 140px !important;
    resize: vertical !important;
}


/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes thiru-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.5; }
    50%       { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
}

@keyframes thiru-fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

/* Alias — some build docs reference 'shimmer' without prefix */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

@keyframes thiru-scan {
    0%   { left: -100%; }
    100% { left:  100%; }
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%       { opacity: 0.3; transform: scale(0.6); }
}

@keyframes pic0-pulse-ring {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(196,30,30,0.4); }
    70%  { transform: scale(1);    box-shadow: 0 0 0 20px rgba(196,30,30,0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(196,30,30,0); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Animation utility classes */
.thiru-animate {
    animation: thiru-fadeInUp 0.8s ease-out;
}

.thiru-animate-delay-1 {
    animation: thiru-fadeInUp 0.8s ease-out 0.2s backwards;
}

.thiru-animate-delay-2 {
    animation: thiru-fadeInUp 0.8s ease-out 0.4s backwards;
}

/* Scroll reveal — IntersectionObserver toggle */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }


/* ============================================
   STAT CARDS  (hero visual grid)
   ============================================ */

.thiru-stat-card {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.8), rgba(42, 42, 42, 0.4));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(196, 30, 30, 0.2);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.thiru-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--red-primary), transparent);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
}

.thiru-stat-card:hover::before {
    transform: translateX(0);
}

.thiru-stat-card:hover {
    border-color: var(--red-primary);
    transform: translateY(-5px);
}

.thiru-stat-number {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--red-primary), var(--red-bright));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.thiru-stat-label {
    font-size: 0.95rem;
    color: var(--grey-300);
    font-weight: 500;
}

.thiru-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}


/* ============================================
   SECTION BACKGROUNDS (named classes)
   ============================================ */

/* Dark gradient section with red top-line divider */
.thiru-section-dark,
.thiru-industries-section {
    background: linear-gradient(180deg, var(--grey-900) 0%, var(--black) 100%);
    position: relative;
}

.thiru-section-dark::before,
.thiru-industries-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red-primary), transparent);
}

/* Trust bar — subtle dark strip */
.thiru-trust-bar {
    background: var(--grey-900);
    border-top: 1px solid rgba(196, 30, 30, 0.1);
    border-bottom: 1px solid rgba(196, 30, 30, 0.1);
}

/* Section light — alternate sections (#000 bg, subtler divider) */
.thiru-section-light {
    background: var(--black);
    position: relative;
}

.thiru-section-light::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196,30,30,0.3), transparent);
}

/* Intro strip — narrow dark band below hero */
.thiru-intro-strip {
    background: var(--grey-900);
    border-top: 1px solid rgba(196,30,30,0.15);
    border-bottom: 1px solid rgba(196,30,30,0.15);
}

/* CTA band */
.thiru-cta-band {
    background: linear-gradient(135deg, var(--grey-900) 0%, var(--black) 100%) !important;
    position: relative;
    overflow: hidden;
}

/* 3px red bar on ::after — Elementor does not use ::after for backgrounds */
.thiru-cta-band::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red-dark), var(--red-primary), var(--red-bright), var(--red-primary), var(--red-dark));
    pointer-events: none;
    z-index: 10;
}

/* Glow on e-con-inner::before — Elementor never touches this element's pseudo */
.thiru-cta-band > .e-con-inner::before,
.thiru-cta-band > .elementor-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 80% at top left,    rgba(196, 30, 30, 0.45) 0%, transparent 60%),
        radial-gradient(ellipse 80% 80% at bottom right, rgba(139,  0,  0, 0.35) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.thiru-cta-band .elementor-widget-wrap,
.thiru-cta-band > .elementor-container,
.thiru-cta-band .e-con-inner {
    position: relative;
    z-index: 1;
}


/* ============================================
   FEATURE CARDS
   ============================================ */

.thiru-feature-card {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.6), rgba(10, 10, 10, 0.8));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(196, 30, 30, 0.15);
    border-radius: 20px;
    padding: 3rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.thiru-feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(196, 30, 30, 0.1), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.thiru-feature-card:hover::before {
    opacity: 1;
}

.thiru-feature-card:hover {
    border-color: var(--red-primary);
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(196, 30, 30, 0.2);
}

.thiru-feature-icon {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 1.5rem;
}

.thiru-feature-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.thiru-feature-description {
    color: var(--grey-300);
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

/* Core values / features grid — 4 columns */
.thiru-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

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

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

/* pIC0-specific 3-column feature grid */
.pic0-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

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

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

/* Two-column section inner */
.thiru-two-col {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

/* Features grid */
.thiru-features-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}


/* ============================================
   INDUSTRY CARDS
   ============================================ */

.thiru-industry-card {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.8), rgba(42, 42, 42, 0.4));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(196, 30, 30, 0.2);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.thiru-industry-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--red-primary), transparent);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
}

.thiru-industry-card:hover::before {
    transform: translateX(0);
}

.thiru-industry-card:hover {
    border-color: var(--red-primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(196, 30, 30, 0.3);
}


/* ============================================
   INDUSTRY FLIP BOXES
   ============================================ */

.thiru-industry-flipbox .elementor-flip-box__front {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.thiru-flip-icon-gradient .elementor-flip-box__layer__overlay .elementor-icon,
.thiru-flip-icon-gradient .elementor-flip-box__icon {
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark)) !important;
    border-radius: 12px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1.5rem !important;
    padding: 0 !important;
}

.thiru-flip-icon-gradient .elementor-icon i,
.thiru-flip-icon-gradient .elementor-icon svg {
    color: var(--white) !important;
    fill: var(--white) !important;
}

.thiru-industry-flipbox:hover .elementor-flip-box__front {
    border-color: var(--red-primary) !important;
    box-shadow: 0 10px 30px rgba(196, 30, 30, 0.3) !important;
    transform: translateY(-5px) !important;
}

.thiru-industry-flipbox .elementor-flip-box__layer--front {
    border-top: 2px solid transparent !important;
    transition: border-color 0.8s ease;
}

.thiru-industry-flipbox:hover .elementor-flip-box__layer--front {
    border-top-color: var(--red-primary) !important;
}

.thiru-industry-flipbox .elementor-flip-box__back {
    padding: 2rem;
}


/* ============================================
   DASHBOARD MOCKUP
   ============================================ */

.thiru-dashboard-mockup {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(10, 10, 10, 0.95));
    border: 1px solid rgba(196, 30, 30, 0.3);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.thiru-dashboard-mockup::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px;
    height: 4px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright), var(--red-primary));
    background-size: 200% 100%;
    animation: thiru-shimmer 3s linear infinite;
}

.thiru-dashboard-header {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.thiru-dashboard-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
}

.thiru-dashboard-dot:nth-child(1) { background: #FF5F57; }
.thiru-dashboard-dot:nth-child(2) { background: #FEBC2E; }
.thiru-dashboard-dot:nth-child(3) { background: #28C840; }

.thiru-dashboard-line {
    height: 40px;
    background: linear-gradient(90deg, rgba(196, 30, 30, 0.2), rgba(196, 30, 30, 0.05));
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
}

.thiru-dashboard-line::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(196, 30, 30, 0.3), transparent);
    animation: thiru-scan 2s ease-in-out infinite;
}

.thiru-dashboard-line:nth-child(1) { width: 80%; }
.thiru-dashboard-line:nth-child(2) { width: 60%; }
.thiru-dashboard-line:nth-child(3) { width: 90%; }
.thiru-dashboard-line:nth-child(4) { width: 70%; }


/* ============================================
   PLATFORM FEATURES  (checklist + icons)
   ============================================ */

.thiru-platform-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.thiru-platform-feature-icon {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.thiru-platform-checklist {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.thiru-platform-checklist li {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
    color: var(--white);
}

.thiru-platform-checklist li:last-child {
    border-bottom: none;
}

.thiru-check-icon {
    width: 24px; height: 24px;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--white);
    font-size: 0.75rem;
}


/* ============================================
   FOOTER
   Apply .thiru-footer to the footer section.
   All typography and spacing inside is handled
   automatically — no classes needed on individual
   widgets unless overriding a specific widget.
   ============================================ */

/* ── Base ── */
.thiru-footer {
    background: var(--grey-900);
    position: relative;
}

/* Red gradient top line */
.thiru-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red-primary), transparent);
}

/* ── Section spacing ── */
.thiru-footer .e-con-inner,
.thiru-footer .elementor-container {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
}

/* ── Column headings (Heading widget) — small nav labels ── */
.thiru-footer .elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--white) !important;
    -webkit-text-fill-color: var(--white) !important;
    margin-bottom: 1rem !important;
}

/* ── CTA heading — large fluid size ──
   Apply .thiru-footer-cta to the container holding
   the CTA heading, not the whole footer section. ── */
.thiru-footer-cta {
    background: linear-gradient(135deg, var(--grey-900) 0%, var(--black) 100%) !important;
    position: relative;
    overflow: hidden;
}

/* 3px red bar on ::after — Elementor does not use ::after for backgrounds */
.thiru-footer-cta::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red-dark), var(--red-primary), var(--red-bright), var(--red-primary), var(--red-dark));
    pointer-events: none;
    z-index: 10;
}

/* Glow on e-con-inner::before — Elementor never touches this element's pseudo */
.thiru-footer-cta > .e-con-inner::before,
.thiru-footer-cta > .elementor-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 80% at top left,    rgba(196, 30, 30, 0.45) 0%, transparent 60%),
        radial-gradient(ellipse 80% 80% at bottom right, rgba(139,  0,  0, 0.35) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.thiru-footer-cta > .e-con-inner,
.thiru-footer-cta.elementor-section > .elementor-container {
    position: relative;
    z-index: 1;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.thiru-footer-cta .elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--white) !important;
    -webkit-text-fill-color: var(--white) !important;
    margin-bottom: 1.25rem !important;
}

/* ── Body / description text (Text Editor widget) ── */
.thiru-footer .elementor-widget-text-editor p,
.thiru-footer .elementor-widget-text-editor .elementor-widget-container p {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 400 !important;
    color: var(--grey-300) !important;
    line-height: 1.7 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ── Eyebrow override — add .thiru-eyebrow to the widget
   if a Text Editor in the footer contains // label text ── */
.thiru-footer .thiru-eyebrow p,
.thiru-footer .thiru-eyebrow .elementor-widget-container p {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    color: var(--red-primary) !important;
    line-height: 1.5 !important;
    margin-bottom: 0.75rem !important;
}

/* ── Links ── */
.thiru-footer a {
    color: var(--grey-300);
    transition: all 0.3s ease;
}

.thiru-footer a:hover {
    color: var(--red-primary);
}

/* ── Nav menu links ── */
.thiru-footer .elementor-nav-menu a {
    color: var(--grey-300) !important;
    transition: all 0.3s ease !important;
    display: inline-block;
}

.thiru-footer .elementor-nav-menu a:hover {
    color: var(--red-primary) !important;
    padding-left: 5px !important;
    transform: translateX(5px);
}

.thiru-footer .elementor-nav-menu--layout-vertical .elementor-item {
    padding: 0.5rem 0 !important;
}

.thiru-footer .elementor-nav-menu--main .elementor-item:hover,
.thiru-footer .elementor-nav-menu--main .elementor-item.elementor-item-active,
.thiru-footer .elementor-nav-menu--main .elementor-item.highlighted {
    color: var(--red-primary) !important;
}


/* ============================================
   SERVICES PAGE  (partner cards, info panel,
   module chips, tag pills, trust tiles)
   ============================================ */

.partner-card {
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(10,10,10,0.9));
    border: 1px solid rgba(196,30,30,0.2);
    border-radius: 20px;
    padding: 2.25rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.partner-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright), var(--red-primary));
    background-size: 200% 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.partner-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0; width: 200px; height: 200px;
    background: radial-gradient(circle at top right, rgba(196,30,30,0.07), transparent 60%);
    pointer-events: none;
}

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

.partner-card:hover {
    border-color: var(--red-primary);
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(196,30,30,0.2);
}

.info-panel {
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(10,10,10,0.9));
    border: 1px solid rgba(196,30,30,0.25);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.info-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright), var(--red-primary));
    background-size: 200% 100%;
    animation: thiru-shimmer 3s linear infinite;
}

.info-panel::after {
    content: '';
    position: absolute;
    top: 0; right: 0; width: 250px; height: 250px;
    background: radial-gradient(circle at top right, rgba(196,30,30,0.1), transparent 60%);
    pointer-events: none;
}

.info-panel:hover {
    border-color: var(--red-primary);
    box-shadow: 0 20px 60px rgba(196,30,30,0.15);
}

.module-chip {
    background: rgba(196,30,30,0.06);
    border: 1px solid rgba(196,30,30,0.15);
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: border-color 0.25s, transform 0.25s;
}

.module-chip:hover {
    border-color: rgba(196,30,30,0.4);
    transform: translateX(3px);
}

.thiru-tag {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
    background: rgba(196,30,30,0.1);
    border: 1px solid rgba(196,30,30,0.2);
    color: var(--grey-300);
    margin: 3px;
}

.trust-logo-tile {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(42,42,42,0.4));
    border: 1px solid rgba(196,30,30,0.15);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.trust-logo-tile:hover {
    border-color: var(--red-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(196,30,30,0.2);
}

.trust-logo-tile img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: brightness(0.7);
    transition: filter 0.3s;
    padding: 10px;
}

.trust-logo-tile:hover img { filter: brightness(1); }

/* Shimmer card utility */
.thiru-card-shimmer::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #C41E1E, #E63946, #C41E1E);
    background-size: 200% 100%;
    opacity: 0;
    animation: thiru-shimmer 3s linear infinite;
    transition: opacity 0.3s;
}
.thiru-card-shimmer:hover::before { opacity: 1; }
.thiru-card-shimmer:hover {
    border-color: #C41E1E !important;
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(196,30,30,0.2);
}


/* ============================================
   ENTERPRISE PAGE
   ============================================ */

.thiru-pillar-chip {
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(10,10,10,0.9));
    border: 1px solid rgba(196,30,30,0.2);
    border-radius: 14px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.thiru-pillar-chip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright));
    opacity: 0;
    transition: opacity 0.3s;
}

.thiru-pillar-chip:hover {
    border-color: var(--red-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(196,30,30,0.15);
}

.thiru-pillar-chip:hover::before { opacity: 1; }

.thiru-module-card {
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(10,10,10,0.9));
    border: 1px solid rgba(196,30,30,0.15);
    border-radius: 14px;
    padding: 1.5rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.thiru-module-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright));
    opacity: 0;
    transition: opacity 0.3s;
}

.thiru-module-card:hover {
    border-color: var(--red-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(196,30,30,0.15);
}

.thiru-module-card:hover::before { opacity: 1; }

.thiru-image-frame {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(196,30,30,0.3);
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
    position: relative;
}

.thiru-image-frame::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright), var(--red-primary));
    background-size: 200% 100%;
    animation: thiru-shimmer 3s linear infinite;
    z-index: 2;
}

.thiru-image-frame img {
    width: 100%;
    display: block;
    filter: brightness(0.9) saturate(0.85);
    transition: all 0.5s ease;
}

.thiru-image-frame:hover img {
    filter: brightness(1) saturate(1);
}

.thiru-cap-pill {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: rgba(196,30,30,0.08);
    border: 1px solid rgba(196,30,30,0.3);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--grey-300);
    letter-spacing: 0.05em;
    transition: all 0.2s;
    margin: 0.25rem;
}

.thiru-cap-pill:hover {
    border-color: var(--red-primary);
    color: var(--white);
    background: rgba(196,30,30,0.15);
}

/* Diff box */
.thiru-diff-box {
    background: linear-gradient(135deg, rgba(196,30,30,0.08), rgba(139,0,0,0.05));
    border: 1px solid rgba(196,30,30,0.3);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.thiru-diff-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright));
}

/* Compare panel */
.thiru-compare-panel {
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(10,10,10,0.9));
    border: 1px solid rgba(196,30,30,0.25);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.thiru-compare-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright), var(--red-primary));
    background-size: 200% 100%;
    animation: thiru-shimmer 3s linear infinite;
}

/* Process panel */
.thiru-process-panel {
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(10,10,10,0.9));
    border: 1px solid rgba(196,30,30,0.25);
    border-radius: 20px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.thiru-process-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright), var(--red-primary));
    background-size: 200% 100%;
    animation: thiru-shimmer 3s linear infinite;
}

/* Pricing cards */
.thiru-pricing-card {
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(10,10,10,0.9));
    border: 1px solid rgba(196,30,30,0.2);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.thiru-pricing-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright), var(--red-primary));
    background-size: 200% 100%;
    animation: thiru-shimmer 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

.thiru-pricing-card:hover::before { opacity: 1; }

.thiru-pricing-card:hover {
    border-color: var(--red-primary);
    transform: translateY(-6px);
}

.thiru-pricing-card-featured {
    border-color: var(--red-primary) !important;
    background: linear-gradient(135deg, rgba(196,30,30,0.08), rgba(10,10,10,0.95)) !important;
    transform: scale(1.04);
}

.thiru-pricing-card-featured::before { opacity: 1 !important; }
.thiru-pricing-card-featured:hover { transform: scale(1.04) translateY(-6px); }

/* Who tiles */
.thiru-who-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
}

.thiru-who-tile {
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(10,10,10,0.9));
    border: 1px solid rgba(196,30,30,0.2);
    border-radius: 12px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.thiru-who-tile:hover {
    border-color: var(--red-primary);
    transform: translateY(-4px);
}


/* ============================================
   SLIDER FADE
   ============================================ */

.elementor-element-7d83186 {
    position: relative;
}

.elementor-element-7d83186::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 200px; height: 100%;
    background: linear-gradient(to right, transparent, black);
    pointer-events: none;
    z-index: 10;
}


/* ============================================
   SOLUTIONS BY INDUSTRY PAGE
   ============================================ */

.thiru-coverage-strip {
    background: var(--grey-900);
    border-top: 1px solid rgba(196, 30, 30, 0.15);
    border-bottom: 1px solid rgba(196, 30, 30, 0.15);
    padding: 1.25rem 2rem;
}

.thiru-coverage-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--red-primary);
    white-space: nowrap;
}

.thiru-coverage-item {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey-300);
    padding: 0 1rem;
    border-right: 1px solid rgba(196, 30, 30, 0.2);
    display: inline-block;
}

.thiru-coverage-item:last-child {
    border-right: none;
}

.industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.industry-card {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.6), rgba(10, 10, 10, 0.8));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(196, 30, 30, 0.15);
    border-radius: 20px;
    padding: 2.5rem;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.industry-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(196, 30, 30, 0.1), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.industry-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--red-primary), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.industry-card:hover::before,
.industry-card.active::before { opacity: 1; }

.industry-card:hover::after,
.industry-card.active::after  { transform: translateX(0); }

.industry-card:hover,
.industry-card.active {
    border-color: var(--red-primary);
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(196, 30, 30, 0.2);
}

.card-icon-wrap {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.card-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--white);
    position: relative;
    z-index: 1;
}

.card-excerpt {
    color: var(--grey-300);
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--red-bright);
    position: relative;
    z-index: 1;
    transition: gap 0.2s;
    text-decoration: none;
}

.industry-card:hover .card-cta,
.industry-card.active .card-cta { gap: 0.7rem; }

.card-cta .arr {
    display: inline-block;
    transition: transform 0.2s;
}

.industry-card:hover .arr,
.industry-card.active .arr { transform: translateX(4px); }

.back-row {
    max-width: 1800px;
    margin: 0 auto;
    padding: 3rem 2rem 0;
    display: none;
}

.back-row.visible {
    display: block;
}

.detail-section {
    position: relative;
    overflow: hidden;
    background: var(--black);
    border-top: 1px solid rgba(196, 30, 30, 0.15);
    border-bottom: 1px solid rgba(196, 30, 30, 0.15);
    display: none;
}

.detail-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red-primary), transparent);
    pointer-events: none;
}

.detail-section.visible {
    display: block;
    animation: thiru-fadeInUp 0.45s ease;
}

.detail-inner {
    max-width: 1800px;
    margin: 0 auto;
    padding: 5rem 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}

.detail-tag {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--red-primary);
    margin-bottom: 0.75rem;
}

.detail-title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.5rem;
    color: var(--white);
}

.detail-tagline {
    font-size: 1.1rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--red-primary), var(--red-bright));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.75rem;
}

.detail-desc {
    font-size: 1.05rem;
    color: var(--grey-300);
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

.challenges-heading {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--red-primary);
    margin-bottom: 1rem;
}

.challenge-list {
    margin-bottom: 2.5rem;
}

.challenge-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(196, 30, 30, 0.1);
    font-size: 0.95rem;
    color: var(--grey-300);
}

.challenge-item:last-child {
    border-bottom: none;
}

.chk {
    width: 22px; height: 22px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 0.65rem;
    font-weight: 700;
    margin-top: 1px;
}

.caps-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

.cap-pill {
    padding: 0.4rem 1rem;
    background: rgba(196, 30, 30, 0.08);
    border: 1px solid rgba(196, 30, 30, 0.3);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--grey-300);
    letter-spacing: 0.05em;
    transition: all 0.2s;
}

.cap-pill:hover {
    border-color: var(--red-primary);
    color: var(--white);
    background: rgba(196, 30, 30, 0.15);
}

.detail-image-wrap {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(196, 30, 30, 0.3);
    position: relative;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.detail-image-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright), var(--red-primary));
    background-size: 200% 100%;
    animation: thiru-shimmer 3s linear infinite;
    z-index: 2;
    pointer-events: none;
}

.detail-image-wrap img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    filter: brightness(0.75) saturate(0.8);
    transition: all 0.5s ease;
}

.detail-image-wrap:hover img {
    filter: brightness(0.9) saturate(1);
}

.img-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    pointer-events: none;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(196, 30, 30, 0.1);
    border: 1px solid rgba(196, 30, 30, 0.2);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 1.5rem;
}

.stat-box {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.8), rgba(10, 10, 10, 0.9));
    padding: 1.5rem;
    text-align: center;
}

.stat-val {
    font-size: 1.6rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--red-primary), var(--red-bright));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.25rem;
}

.stat-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--grey-300);
}

.threat-meter {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.8), rgba(10, 10, 10, 0.9));
    border: 1px solid rgba(196, 30, 30, 0.2);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.meter-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--grey-300);
    white-space: nowrap;
}

.meter-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.meter-bar {
    width: 10px;
    border-radius: 3px 3px 0 0;
    transition: height 0.5s ease;
}


/* ============================================
   INFO PANEL  (About Us + LaaS section)
   ============================================ */

.panel-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--red-primary);
    margin-bottom: 1.5rem;
}

.panel-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.panel-tagline {
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--red-primary), var(--red-bright));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 2rem;
}

.panel-items {
    display: flex;
    flex-direction: column;
}

.panel-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(196,30,30,0.1);
    font-size: 0.95rem;
    color: var(--grey-300);
    line-height: 1.6;
}

.panel-item:last-child {
    border-bottom: none;
}


/* ============================================
   SERVICE CARDS  (About Us page)
   ============================================ */

.service-card {
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(10,10,10,0.9));
    border: 1px solid rgba(196,30,30,0.2);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright), var(--red-primary));
    background-size: 200% 100%;
    animation: thiru-shimmer 3s linear infinite;
}

.service-card:hover {
    border-color: var(--red-primary);
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(196,30,30,0.2);
}

.service-img-wrap { position: relative; overflow: hidden; }

.service-img-wrap img {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    display: block;
    filter: brightness(0.65) saturate(0.7);
    transition: all 0.5s ease;
}

.service-card:hover .service-img-wrap img { filter: brightness(0.85) saturate(1); }

.service-img-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
    pointer-events: none;
}

.service-body { padding: 2rem 2.5rem 2.5rem; }

.service-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--red-primary);
    margin-bottom: 0.75rem;
}

.service-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.85rem; }
.service-desc  { font-size: 0.95rem; color: var(--grey-300); line-height: 1.75; }


/* ============================================
   TRUST LOGOS  (About Us page)
   ============================================ */

.thiru-trust-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
}

.thiru-logo-tile {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(42,42,42,0.4));
    border: 1px solid rgba(196,30,30,0.15);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.thiru-logo-tile:hover {
    border-color: var(--red-primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(196,30,30,0.2);
}

.thiru-logo-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0.6) grayscale(0.3);
    transition: filter 0.3s ease;
    display: block;
}

.thiru-logo-tile:hover img {
    filter: brightness(1) grayscale(0);
}


/* ============================================
   LOCATION CARDS  (About Us page)
   ============================================ */

.thiru-locations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

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

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

.location-card {
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(42,42,42,0.4));
    border: 1px solid rgba(196,30,30,0.2);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.location-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--red-primary), transparent);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
}

.location-card:hover::before { transform: translateX(0); }

.location-card:hover {
    border-color: var(--red-primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(196,30,30,0.2);
}

.location-flag    { font-size: 2.5rem; margin-bottom: 1rem; }

.location-country {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--red-primary);
    margin-bottom: 0.5rem;
}

.location-name    { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.75rem; }

.location-address {
    font-size: 0.88rem;
    color: var(--grey-300);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.location-phone {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--red-primary);
    margin-top: auto;
}


/* ============================================
   pIC0 PAGE COMPONENTS
   ============================================ */

.pic0-differentiator {
    background: linear-gradient(135deg, rgba(196,30,30,0.08), rgba(139,0,0,0.05));
    border: 1px solid rgba(196,30,30,0.3);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.pic0-differentiator::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright));
}

.pic0-shield-glow {
    width: 260px;
    height: 260px;
    background: linear-gradient(135deg, rgba(196,30,30,0.15), rgba(139,0,0,0.1));
    border: 2px solid rgba(196,30,30,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pic0-pulse-ring 3s ease-in-out infinite;
    margin: 0 auto;
    position: relative;
}

.pic0-shield-inner {
    width: 180px;
    height: 180px;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    box-shadow: 0 20px 60px rgba(196,30,30,0.4);
}

.pic0-shield-status {
    position: absolute;
    bottom: 10px; right: 10px;
    background: #00C851;
    border: 2px solid var(--black);
    border-radius: 50%;
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--white);
}

.pic0-who-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
}

.pic0-who-tile {
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(10,10,10,0.9));
    border: 1px solid rgba(196,30,30,0.2);
    border-radius: 12px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.pic0-who-tile:hover {
    border-color: var(--red-primary);
    transform: translateY(-4px);
}

.pic0-who-icon  { font-size: 1.8rem; margin-bottom: 0.5rem; }

.pic0-who-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--grey-300);
    line-height: 1.4;
}

.pic0-compare {
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(10,10,10,0.9));
    border: 1px solid rgba(196,30,30,0.25);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.pic0-compare::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright), var(--red-primary));
    background-size: 200% 100%;
    animation: thiru-shimmer 3s linear infinite;
}

.pic0-compare-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.pic0-col-head {
    padding: 1.25rem 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
}

.pic0-col-head.them {
    background: rgba(255,255,255,0.03);
    color: var(--grey-300);
    border-right: 1px solid rgba(196,30,30,0.15);
}

.pic0-col-head.us {
    background: rgba(196,30,30,0.08);
    color: var(--red-bright);
}

.pic0-compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(196,30,30,0.1);
}

.pic0-compare-cell {
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.pic0-compare-cell.them {
    color: var(--grey-300);
    border-right: 1px solid rgba(196,30,30,0.1);
    background: rgba(255,255,255,0.01);
}

.pic0-compare-cell.us {
    color: var(--white);
    background: rgba(196,30,30,0.04);
    font-weight: 500;
}

.pic0-process-panel {
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(10,10,10,0.9));
    border: 1px solid rgba(196,30,30,0.25);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}

.pic0-process-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright), var(--red-primary));
    background-size: 200% 100%;
    animation: thiru-shimmer 3s linear infinite;
}

.pic0-step {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(196,30,30,0.1);
}

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

.pic0-step-num {
    width: 36px; height: 36px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--white);
}

.pic0-step-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.3rem;
}

.pic0-step-desc {
    font-size: 0.9rem;
    color: var(--grey-300);
    line-height: 1.6;
}

.pic0-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;
}

.pic0-pricing-card {
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(10,10,10,0.9));
    border: 1px solid rgba(196,30,30,0.2);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pic0-pricing-card.featured {
    border-color: var(--red-primary);
    background: linear-gradient(135deg, rgba(196,30,30,0.08), rgba(10,10,10,0.95));
    transform: scale(1.04);
}

.pic0-pricing-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright), var(--red-primary));
    background-size: 200% 100%;
    animation: thiru-shimmer 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

.pic0-pricing-card.featured::before,
.pic0-pricing-card:hover::before { opacity: 1; }

.pic0-pricing-card:hover {
    border-color: var(--red-primary);
    transform: translateY(-6px);
}

.pic0-pricing-card.featured:hover { transform: scale(1.04) translateY(-6px); }

.pic0-badge {
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
    color: var(--white);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
}

.pic0-plan-price {
    font-size: 2.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--red-primary), var(--red-bright));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.pic0-plan-period {
    font-size: 0.85rem;
    color: var(--grey-300);
    margin-bottom: 2rem;
}

.pic0-plan-features {
    list-style: none;
    margin-bottom: 2rem;
    flex: 1;
}

.pic0-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(196,30,30,0.08);
    font-size: 0.92rem;
    color: var(--grey-300);
    line-height: 1.5;
}

.pic0-plan-features li:last-child { border-bottom: none; }

@media (max-width: 1024px) {
    .pic0-who-grid      { grid-template-columns: repeat(3, 1fr); }
    .pic0-pricing-grid  { grid-template-columns: 1fr; }
    .pic0-pricing-card.featured { transform: scale(1); }
    .pic0-pricing-card.featured:hover { transform: translateY(-6px); }
}

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


/* ============================================
   FILEBIRD DOCUMENT LIBRARY OVERRIDES
   ============================================ */

.thiru-filebird-section .njt-fbdl,
.thiru-filebird-featured .njt-fbdl {
    background: transparent !important;
    font-family: 'Outfit', sans-serif !important;
    color: #FFFFFF !important;
}

.thiru-filebird-section .fbdl-search-control .fbdl-title,
.thiru-filebird-featured .fbdl-search-control .fbdl-title {
    display: none !important;
}

.thiru-filebird-section .fbdl-search-control-wrapper,
.thiru-filebird-featured .fbdl-search-control-wrapper {
    margin-bottom: 1.5rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.thiru-filebird-section .fbdl-search-control-wrapper input,
.thiru-filebird-featured .fbdl-search-control-wrapper input {
    background: rgba(26, 26, 26, 0.8) !important;
    border: 1px solid rgba(196, 30, 30, 0.25) !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.9rem !important;
    padding: 0.7rem 1.25rem !important;
    outline: none !important;
    width: 100% !important;
    max-width: 420px !important;
    transition: border-color 0.2s !important;
}

.thiru-filebird-section .fbdl-search-control-wrapper input:focus,
.thiru-filebird-featured .fbdl-search-control-wrapper input:focus {
    border-color: #C41E1E !important;
    box-shadow: 0 0 0 3px rgba(196, 30, 30, 0.1) !important;
}

.thiru-filebird-section .fbdl-layout-control,
.thiru-filebird-featured .fbdl-layout-control {
    margin-bottom: 1.5rem !important;
    color: #B0B0B0 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.72rem !important;
    background: transparent !important;
}

.thiru-filebird-section .fbdl-layout-control input[type="number"],
.thiru-filebird-featured .fbdl-layout-control input[type="number"] {
    background: rgba(26, 26, 26, 0.8) !important;
    border: 1px solid rgba(196, 30, 30, 0.25) !important;
    border-radius: 4px !important;
    color: #FFFFFF !important;
    padding: 0.2rem 0.5rem !important;
    width: 60px !important;
    font-size: 0.72rem !important;
}

.thiru-filebird-section .fbdl-layout-control svg,
.thiru-filebird-featured .fbdl-layout-control svg {
    color: #B0B0B0 !important;
}

.thiru-filebird-section .fbdl-layout-control-display-span-selected svg,
.thiru-filebird-featured .fbdl-layout-control-display-span-selected svg {
    color: #C41E1E !important;
}

.thiru-filebird-section .fbdl-spinner,
.thiru-filebird-featured .fbdl-spinner {
    background: transparent !important;
}

.thiru-filebird-section a.fbdl-download-button,
.thiru-filebird-featured a.fbdl-download-button,
.thiru-filebird-section td.fbdl-list-last-item a,
.thiru-filebird-featured td.fbdl-list-last-item a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.45rem 1.1rem !important;
    background: linear-gradient(135deg, #C41E1E, #8B0000) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: box-shadow 0.25s, transform 0.2s !important;
    cursor: pointer !important;
}

.thiru-filebird-section a.fbdl-download-button:hover,
.thiru-filebird-featured a.fbdl-download-button:hover,
.thiru-filebird-section td.fbdl-list-last-item a:hover,
.thiru-filebird-featured td.fbdl-list-last-item a:hover {
    box-shadow: 0 6px 20px rgba(196, 30, 30, 0.45) !important;
    transform: translateY(-2px) !important;
    color: #FFFFFF !important;
}

.thiru-filebird-section .fbdl-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

.thiru-filebird-section .fbdl-table thead tr {
    background: rgba(196, 30, 30, 0.08) !important;
    border-bottom: 1px solid rgba(196, 30, 30, 0.2) !important;
}

.thiru-filebird-section .fbdl-table-first-header,
.thiru-filebird-section .fbdl-table-header,
.thiru-filebird-section .fbdl-table-last-header {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #B0B0B0 !important;
    padding: 0.85rem 1.25rem !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
}

.thiru-filebird-section .fbdl-table tbody tr {
    border-bottom: 1px solid rgba(196, 30, 30, 0.08) !important;
    background: transparent !important;
    transition: background 0.2s !important;
}

.thiru-filebird-section .fbdl-table tbody tr:last-child {
    border-bottom: none !important;
}

.thiru-filebird-section .fbdl-table tbody tr:hover {
    background: rgba(196, 30, 30, 0.04) !important;
}

.thiru-filebird-section td.fbdl-list-first-item {
    padding: 1rem 1.25rem !important;
    border: none !important;
}

.thiru-filebird-section .fbdl-list-item-icon {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.thiru-filebird-section .fbdl-list-item-icon-wrapper {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    background: linear-gradient(135deg, #C41E1E, #8B0000) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
}

.thiru-filebird-section .fbdl-list-item-icon-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
}

.thiru-filebird-section .fbdl-list-item-title a {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: color 0.2s !important;
}

.thiru-filebird-section .fbdl-list-item-title a:hover {
    color: #E63946 !important;
}

.thiru-filebird-section td.fbdl-list-item {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.72rem !important;
    color: #B0B0B0 !important;
    padding: 1rem 1.25rem !important;
    border: none !important;
    white-space: nowrap !important;
}

.thiru-filebird-section td.fbdl-list-last-item {
    padding: 1rem 1.25rem !important;
    border: none !important;
    text-align: right !important;
}

.thiru-filebird-featured .fbdl-grid {
    display: grid !important;
    gap: 1.5rem !important;
}

.thiru-filebird-featured .fbdl-grid.fb-col-4 { grid-template-columns: repeat(4, 1fr) !important; }
.thiru-filebird-featured .fbdl-grid.fb-col-3 { grid-template-columns: repeat(3, 1fr) !important; }
.thiru-filebird-featured .fbdl-grid.fb-col-2 { grid-template-columns: repeat(2, 1fr) !important; }

.thiru-filebird-featured .fbdl-grid-item {
    background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(10,10,10,0.9)) !important;
    border: 1px solid rgba(196, 30, 30, 0.15) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 1.75rem !important;
    gap: 0.75rem !important;
    transition: all 0.35s ease !important;
}

.thiru-filebird-featured .fbdl-grid-item:hover {
    border-color: #C41E1E !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 48px rgba(196, 30, 30, 0.2) !important;
}

.thiru-filebird-featured .fbdl-grid-icon {
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(135deg, #C41E1E, #8B0000) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    flex-shrink: 0 !important;
}

.thiru-filebird-featured .fbdl-grid-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
}

.thiru-filebird-featured .fbdl-grid-item-info a.fbdl-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: color 0.2s !important;
    display: block !important;
    margin-top: 0.4rem !important;
}

.thiru-filebird-featured .fbdl-grid-item-info a.fbdl-title:hover {
    color: #E63946 !important;
}

.thiru-filebird-featured .fbdl-file-size {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.65rem !important;
    color: #B0B0B0 !important;
    display: block !important;
    margin-top: 0.25rem !important;
}

.thiru-filebird-featured a.fbdl-download-button {
    margin-top: auto !important;
    width: 100% !important;
}


/* ============================================
   OUR TEAM PAGE
   ============================================ */

.thiru-founder-card.e-con,
.thiru-founder-card .e-con-inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
}

.thiru-founder-photo-col.e-con {
    width: 420px !important;
    min-width: 420px !important;
    max-width: 420px !important;
    flex: 0 0 420px !important;
    padding: 0 !important;
    overflow: hidden !important;
    align-self: stretch !important;
}

.thiru-founder-photo-col .elementor-widget-image,
.thiru-founder-photo-col .elementor-widget-image a,
.thiru-founder-photo-col .elementor-widget-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    filter: brightness(0.8) saturate(0.85) !important;
    transition: filter 0.5s ease !important;
    margin: 0 !important;
}

.thiru-founder-card:hover .thiru-founder-photo-col img {
    filter: brightness(0.9) saturate(1) !important;
}

.thiru-founder-bio-col.e-con {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 3rem !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.thiru-role-red {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: var(--red-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.75rem !important;
}

.thiru-role-dot {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--red-primary) !important;
    flex-shrink: 0 !important;
}

.thiru-member-name-heading .elementor-heading-title {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: var(--white) !important;
    -webkit-text-fill-color: var(--white) !important;
    margin-bottom: 0 !important;
}

.thiru-name-divider-widget .elementor-divider-separator {
    background: linear-gradient(135deg, var(--red-primary), var(--red-bright)) !important;
    border: none !important;
    height: 2px !important;
}

.thiru-name-divider-widget .elementor-divider {
    text-align: left !important;
}

.thiru-founder-bio p {
    font-size: 0.95rem !important;
    color: var(--grey-300) !important;
    line-height: 1.8 !important;
}

@media (max-width: 900px) {
    .thiru-founder-card.e-con,
    .thiru-founder-card .e-con-inner {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    .thiru-founder-photo-col.e-con {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        height: 320px !important;
    }

    .thiru-founder-bio-col.e-con {
        padding: 2rem !important;
    }
}

.thiru-member-card .elementor-widget-image {
    height: 280px;
    overflow: hidden;
}

.thiru-member-card .elementor-widget-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
}

@media (max-width: 767px) {
    .thiru-founder-card.e-con > .e-con-inner,
    .thiru-founder-card .e-con-inner {
        flex-direction: column !important;
    }

    .thiru-founder-photo-col.e-con {
        order: 1 !important;
        width: 100% !important;
        min-width: 100% !important;
        height: 300px !important;
    }

    .thiru-founder-bio-col.e-con {
        order: 2 !important;
        width: 100% !important;
        padding: 2rem !important;
    }
}


/* ============================================
   TMS CARDS
   ============================================ */

.tms-card {
    background: linear-gradient(135deg, rgba(26,26,26,0.7), rgba(10,10,10,0.9));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s;
    cursor: default;
    height: 100%;
}

.tms-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(196,30,30,0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.tms-card:hover {
    border-color: rgba(196,30,30,0.3);
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

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

.tms-icon {
    width: 52px; height: 52px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(196,30,30,0.2), rgba(139,0,0,0.3));
    border: 1px solid rgba(196,30,30,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
}

.tms-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
}

.tms-card p {
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    color: #B0B0B0;
    line-height: 1.75;
    margin: 0 0 1rem 0;
}

.tms-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #C41E1E;
    padding: 0.3rem 0.75rem;
    border: 1px solid rgba(196,30,30,0.3);
    border-radius: 2px;
}


/* ============================================
   FORMS  (global Elementor field overrides)
   ============================================ */

/* Submit button — gradient red */
.thiru-form-card .elementor-button[type="submit"] {
    background: linear-gradient(135deg, #C41E1E, #8B0000) !important;
    border: none !important;
}

/* Field labels */
.elementor-field-label {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: var(--grey-300) !important;
}

/* Input fields */
.elementor-field-type-text input,
.elementor-field-type-email input,
.elementor-field-type-tel input,
.elementor-field-type-select select,
.elementor-field-type-textarea textarea {
    background: var(--grey-900) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.elementor-field-type-text input:focus,
.elementor-field-type-email input:focus,
.elementor-field-type-tel input:focus,
.elementor-field-type-select select:focus,
.elementor-field-type-textarea textarea:focus {
    border-color: rgba(196,30,30,0.6) !important;
    box-shadow: 0 0 0 3px rgba(196,30,30,0.1) !important;
    outline: none !important;
}

/* Radio pill overrides */
.elementor-field-type-radio .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.elementor-field-type-radio label {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.62rem !important; font-weight: 600 !important;
    letter-spacing: 0.12em !important; text-transform: uppercase !important;
    padding: 0.5rem 1rem !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 4px !important; color: var(--grey-300) !important;
    cursor: pointer !important; transition: all 0.2s !important;
    background: var(--grey-900) !important;
    display: inline-flex !important; align-items: center !important; gap: 0.4rem;
}
.elementor-field-type-radio input[type="radio"] { display: none !important; }
.elementor-field-type-radio input[type="radio"]:checked + label {
    border-color: var(--red-primary) !important;
    color: #fff !important; background: rgba(196,30,30,0.15) !important;
}
.elementor-field-type-radio label:hover { border-color: rgba(196,30,30,0.4) !important; color: #fff !important; }

/* Form card header */
.form-card-header {
    background: linear-gradient(135deg, var(--grey-900), var(--grey-800));
    padding: 2rem 2.5rem;
    border-bottom: 1px solid rgba(196,30,30,0.15);
    position: relative;
}
.form-card-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--red-dark), var(--red-primary), var(--red-bright));
}
.form-card-title { font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 800; margin-bottom: 0.35rem; color: #fff; }
.form-card-sub   { font-family: 'Outfit', sans-serif; font-size: 0.875rem; color: var(--grey-300); }


/* ============================================
   SIDEBAR COMPONENTS
   ============================================ */

.sidebar-benefits { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; }
.benefit-item {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1rem; background: var(--grey-800);
    border: 1px solid rgba(255,255,255,0.05); border-radius: 4px; transition: border-color 0.25s;
}
.benefit-item:hover { border-color: rgba(196,30,30,0.3); }
.benefit-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    background: rgba(196,30,30,0.1); border: 1px solid rgba(196,30,30,0.25);
    border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.benefit-text h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.2rem; color: #fff; }
.benefit-text p  { font-size: 0.78rem; color: var(--grey-300); line-height: 1.5; }

.sidebar-terminal {
    background: var(--grey-900); border: 1px solid rgba(196,30,30,0.2);
    border-radius: 6px; overflow: hidden; font-family: 'JetBrains Mono', monospace;
}
.terminal-header {
    background: rgba(196,30,30,0.08); padding: 0.6rem 1rem;
    display: flex; align-items: center; gap: 0.4rem;
    border-bottom: 1px solid rgba(196,30,30,0.15);
}
.td { width: 8px; height: 8px; border-radius: 50%; }
.td-r { background: #E63946; } .td-a { background: #F4A261; } .td-g { background: #2A9D8F; }
.terminal-ttl { font-size: 0.6rem; color: var(--red-primary); letter-spacing: 0.15em; text-transform: uppercase; margin-left: 0.4rem; }
.terminal-body { padding: 1.25rem; font-size: 0.68rem; line-height: 2.1; }
.t-prompt { color: var(--red-primary); }
.t-cmd    { color: #fff; }
.t-out    { color: var(--grey-300); padding-left: 1rem; display: block; }
.t-ok     { color: #2A9D8F; }
.t-cursor { display: inline-block; animation: blink 1s infinite; color: var(--red-primary); }


/* ============================================
   BREADCRUMB
   ============================================ */

.thiru-breadcrumb {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem; letter-spacing: 0.15em;
    text-transform: uppercase; color: #B0B0B0;
    margin-bottom: 2rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.thiru-breadcrumb a { color: #B0B0B0; text-decoration: none; transition: color 0.2s; }
.thiru-breadcrumb a:hover { color: #fff; }
.thiru-breadcrumb .sep { color: var(--red-primary); }


/* ============================================
   LOGOS ROW / INDUSTRY PILLS
   ============================================ */

.logos-row {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 3rem; flex-wrap: wrap;
}
.logo-pill {
    padding: 0.6rem 1.5rem;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
    color: rgba(255,255,255,0.35); text-transform: uppercase;
    transition: all 0.25s; cursor: default; white-space: nowrap;
}
.logo-pill:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); }


/* ============================================
   STAT ITEMS
   ============================================ */

.stat-item { text-align: center; padding: 1.5rem 1rem; }
.stat-num {
    font-family: 'Outfit', sans-serif;
    font-size: 3.5rem; font-weight: 800; line-height: 1;
    background: linear-gradient(135deg, #fff, var(--grey-300));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; margin-bottom: 0.25rem;
}
.stat-num .stat-accent { -webkit-text-fill-color: var(--red-bright); }


/* ============================================
   PRODUCT CATALOG  (filter tabs, grid, cards)
   ============================================ */

.page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.catalog-hero {
    padding: 5rem 0 3.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
}
.catalog-hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -120px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(196,30,30,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.hero-content { max-width: 680px; }

.hero-sub {
    font-size: 1.05rem;
    color: var(--grey-300);
    line-height: 1.7;
    max-width: 560px;
}

.filter-bar {
    padding: 2.5rem 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.filter-tab {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.55rem 1.25rem;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--grey-900);
    color: var(--grey-300);
    cursor: pointer;
    transition: all 0.2s;
}
.filter-tab:hover { border-color: rgba(196,30,30,0.4); color: var(--white); }
.filter-tab.active {
    border-color: var(--red-primary);
    color: var(--white);
    background: rgba(196,30,30,0.15);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 2rem 0 5rem;
}

.product-card {
    background: var(--grey-900);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red-dark), var(--red-primary), var(--red-bright));
    opacity: 0;
    transition: opacity 0.3s ease;
}
.product-card:hover {
    border-color: rgba(196,30,30,0.3);
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(196,30,30,0.15);
}
.product-card:hover::before { opacity: 1; }
.product-card.is-expanded { grid-column: span 3; cursor: default; }
.product-card.is-collapsed { opacity: 0.45; filter: grayscale(0.4); pointer-events: none; }
.product-card.is-collapsed:hover { transform: none; }

.card-header {
    padding: 2rem 2rem 1.5rem;
    background: linear-gradient(160deg, var(--grey-800) 0%, var(--grey-900) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: relative;
}
.card-tier-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.card-tier-badge::before {
    content: '';
    width: 14px; height: 2px;
    background: var(--red-primary);
    flex-shrink: 0;
}
.card-product-name {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 0.4rem;
    line-height: 1.1;
}
.card-tagline {
    font-size: 0.85rem;
    color: var(--grey-300);
    line-height: 1.5;
}
.card-icon-wrap {
    position: absolute;
    top: 2rem; right: 2rem;
    width: 52px; height: 52px;
    background: linear-gradient(135deg, rgba(196,30,30,0.2), rgba(139,0,0,0.3));
    border: 1px solid rgba(196,30,30,0.25);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.card-body {
    padding: 1.75rem 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.card-description {
    font-size: 0.9rem;
    color: var(--grey-300);
    line-height: 1.75;
}
.feature-pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.feature-pill {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey-300);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 3px;
    padding: 0.3rem 0.7rem;
    transition: all 0.2s;
}
.feature-pill.pill-red {
    color: var(--red-primary);
    border-color: rgba(196,30,30,0.25);
    background: rgba(196,30,30,0.06);
}
.highlight-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.highlight-list li {
    font-size: 0.85rem;
    color: var(--grey-300);
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    line-height: 1.5;
}
.highlight-list li::before {
    content: '→';
    color: var(--red-primary);
    font-family: 'JetBrains Mono', monospace;
    flex-shrink: 0;
    margin-top: 0.05em;
}
.card-footer {
    padding: 1.25rem 2rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.card-expand-btn {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--grey-300);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;
    padding: 0;
}
.card-expand-btn:hover { color: var(--white); }
.expand-arrow { display: inline-block; transition: transform 0.3s ease; }
.is-expanded .expand-arrow { transform: rotate(180deg); }

.expanded-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 1px solid rgba(196,30,30,0.12);
}
.expanded-panel.open { max-height: 800px; }
.expanded-inner {
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

.module-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.module-item {
    background: var(--grey-800);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    transition: border-color 0.2s;
}
.module-item:hover { border-color: rgba(196,30,30,0.25); }
.module-name { font-family: 'Outfit', sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--white); margin-bottom: 0.3rem; }
.module-desc { font-size: 0.78rem; color: var(--grey-300); line-height: 1.55; }

.pricing-card {
    background: var(--grey-800);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 1.5rem;
    position: relative;
}
.pricing-card.featured {
    border-color: rgba(196,30,30,0.35);
    background: linear-gradient(160deg, rgba(196,30,30,0.08), var(--grey-800));
}
.pricing-card.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: -1px; right: 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    padding: 0.3rem 0.75rem;
    background: var(--red-primary);
    color: var(--white);
    border-radius: 0 0 4px 4px;
}
.plan-name { font-size: 0.8rem; font-weight: 700; color: var(--white); margin-bottom: 0.35rem; }
.plan-price { font-size: 1.75rem; font-weight: 800; color: var(--white); line-height: 1; margin-bottom: 0.25rem; }
.plan-price .price-period { font-size: 0.75rem; font-weight: 400; color: var(--grey-300); }
.plan-desc { font-size: 0.78rem; color: var(--grey-300); margin-bottom: 1rem; }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.plan-features li { font-size: 0.78rem; color: var(--grey-300); display: flex; align-items: flex-start; gap: 0.55rem; }
.plan-features li::before { content: '✓'; color: var(--red-bright); font-weight: 700; flex-shrink: 0; }

.stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.stat-cell { background: var(--grey-900); padding: 1.25rem 1rem; text-align: center; }
.stat-label { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--grey-300); }

.compare-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.82rem; color: var(--grey-300); }
.compare-row:last-child { border-bottom: none; }
.compare-yes { color: #2A9D8F; font-weight: 700; flex-shrink: 0; }
.compare-no  { color: var(--red-bright); font-weight: 700; flex-shrink: 0; opacity: 0.6; }


/* ============================================
   ELEMENTOR WIDGET OVERRIDES
   ============================================ */

/* HTML widget — full width */
.elementor-widget-html {
    width: 100%;
}
.elementor-widget-html .elementor-widget-container {
    width: 100%;
}

/* Override Hello Elementor reset.css button hover/focus —
   reset.css sets background-color: #c36 on all button hovers.
   Scoped to .thiru-dark-page to avoid affecting other pages. */
.thiru-dark-page [type=button]:focus,
.thiru-dark-page [type=button]:hover,
.thiru-dark-page [type=submit]:focus,
.thiru-dark-page [type=submit]:hover,
.thiru-dark-page button:focus,
.thiru-dark-page button:hover {
    background-color: unset;
    color: inherit;
}


/* ============================================
   RESPONSIVE  (global)
   ============================================ */

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

@media (max-width: 768px) {
    .thiru-stat-number { font-size: 2rem; }
    .thiru-feature-card { padding: 2rem; }
    .thiru-dashboard-mockup { padding: 1.5rem; }

    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 100% !important;
        padding: 0 1rem;
    }

    .detail-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 3rem 1.5rem;
    }

    .detail-visual { order: -1; }

    .hero-title { font-size: 2rem; }
}

@media (max-width: 900px) {
    .product-grid { grid-template-columns: 1fr; }
    .product-card.is-expanded { grid-column: span 1; }
    .expanded-inner { grid-template-columns: 1fr; }
}

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


/* ============================================
   SOLUTIONS BY TOPIC — Page-specific CSS
   Append to child theme style.css (190326.css)
   Last updated: March 2026
   ============================================ */


/* ── TOPIC GRID WRAPPER ──────────────────────────────────────
   Mirrors .industry-grid layout from Solutions by Industry.
   Hairline gaps between cards use the background colour. */

.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}


/* ── TOPIC CARD (collapsed state) ────────────────────────────*/

.topic-card {
    background: var(--grey-900);
    padding: 2rem 2rem 1.5rem;
    cursor: default;
    position: relative;
    overflow: hidden;
    transition: background 0.25s ease;
    display: flex;
    flex-direction: column;
    animation: thiru-fadeInUp 0.45s ease both;
}

/* Red top-border sweep on hover/expanded */
.topic-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.topic-card:hover,
.topic-card.is-expanded {
    background: var(--grey-800);
}

.topic-card:hover::before,
.topic-card.is-expanded::before {
    transform: scaleX(1);
}

/* Expanded card spans full grid width */
.topic-card.is-expanded {
    grid-column: 1 / -1;
}

/* Staggered fade-in for cards */
.topic-card:nth-child(1)  { animation-delay: 0.04s; }
.topic-card:nth-child(2)  { animation-delay: 0.09s; }
.topic-card:nth-child(3)  { animation-delay: 0.14s; }
.topic-card:nth-child(4)  { animation-delay: 0.19s; }
.topic-card:nth-child(5)  { animation-delay: 0.24s; }
.topic-card:nth-child(6)  { animation-delay: 0.29s; }
.topic-card:nth-child(7)  { animation-delay: 0.34s; }
.topic-card:nth-child(8)  { animation-delay: 0.39s; }
.topic-card:nth-child(9)  { animation-delay: 0.44s; }
.topic-card:nth-child(10) { animation-delay: 0.49s; }


/* ── CARD HEADER ELEMENTS ────────────────────────────────────*/

/* Number badge — mirrors .card-tier-badge */
.topic-card .card-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(196, 30, 30, 0.45);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.topic-card .card-num::before {
    content: '';
    width: 14px;
    height: 1px;
    background: var(--red-primary);
    opacity: 0.4;
    flex-shrink: 0;
}

/* Card eyebrow — inherits .card-tier-badge style */
.topic-card .card-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--red-primary);
    margin-bottom: 0.5rem;
}

/* Card title — inherits .card-product-name */
.topic-card .card-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

/* Card excerpt — inherits .card-description */
.topic-card .card-excerpt {
    font-size: 0.88rem;
    color: var(--grey-300);
    line-height: 1.75;
    flex: 1;
}


/* ── CARD FOOTER & EXPAND BUTTON ─────────────────────────────
   Mirrors .card-footer and .card-expand-btn from product grid */

.topic-card .card-footer {
    padding-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 1.25rem;
}

.topic-card .card-expand-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--grey-300);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;
    padding: 0;
}

.topic-card .card-expand-btn:hover { color: var(--white); }

/* Mirrors .expand-arrow */
.topic-card .expand-arrow {
    display: inline-block;
    transition: transform 0.35s ease;
}

.topic-card.is-expanded .expand-arrow {
    transform: rotate(180deg);
}


/* ── EXPANDED PANEL ──────────────────────────────────────────
   Mirrors .expanded-panel / .expanded-panel.open from product grid */

.topic-card .expanded-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 1px solid rgba(196, 30, 30, 0.12);
}

.topic-card .expanded-panel.open {
    max-height: 900px;
}

/* Three-column inner layout — mirrors .expanded-inner */
.topic-card .expanded-inner {
    padding: 2rem 2rem 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5rem;
}


/* ── EXPANDED PANEL — LEFT COLUMN (main detail) ──────────────*/

.topic-card .detail-tagline {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.75rem;
}

.topic-card .exp-col-main p {
    font-size: 0.9rem;
    color: var(--grey-300);
    line-height: 1.8;
    margin-bottom: 1rem;
}
.topic-card .exp-col-main p:last-child { margin-bottom: 0; }
.topic-card .exp-col-main p strong { color: var(--white); }

/* Challenges heading — mirrors .challenges-heading in industry page */
.topic-card .challenges-heading {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red-primary);
    margin: 1.25rem 0 0.75rem;
}

/* Challenge list — mirrors industry page .challenge-list */
.topic-card .challenge-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.topic-card .challenge-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--grey-300);
    line-height: 1.5;
}

.topic-card .chk {
    color: var(--red-bright);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    flex-shrink: 0;
    font-size: 0.75rem;
    margin-top: 0.1em;
}

/* Panel CTA — mirrors .thiru-btn-primary */
.topic-card .panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1.5rem;
    padding: 0.7rem 1.75rem;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: box-shadow 0.3s, transform 0.2s;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.topic-card .panel-cta::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.4s;
}

.topic-card .panel-cta:hover::before { left: 100%; }

.topic-card .panel-cta:hover {
    box-shadow: 0 10px 30px rgba(196, 30, 30, 0.45);
    transform: translateY(-2px);
    color: var(--white);
}


/* ── EXPANDED PANEL — MIDDLE COLUMN ──────────────────────────*/

/* Sub-column label */
.topic-card .col-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(196, 30, 30, 0.7);
    margin-bottom: 0.9rem;
}

/* Capability pills — mirrors .feature-pill.pill-red */
.topic-card .caps-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.topic-card .cap-pill {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red-primary);
    background: rgba(196, 30, 30, 0.06);
    border: 1px solid rgba(196, 30, 30, 0.25);
    border-radius: 3px;
    padding: 0.3rem 0.7rem;
    transition: background 0.2s;
}

.topic-card .cap-pill:hover { background: rgba(196, 30, 30, 0.12); }

/* Use case list — mirrors .highlight-list */
.topic-card .use-case-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.topic-card .use-case-list li {
    font-size: 0.84rem;
    color: var(--grey-300);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.5;
}

.topic-card .use-case-list li::before {
    content: '→';
    color: var(--red-primary);
    font-family: 'JetBrains Mono', monospace;
    flex-shrink: 0;
    margin-top: 0.05em;
}


/* ── EXPANDED PANEL — RIGHT COLUMN (product mapping) ─────────
   Mirrors .module-item from product grid */

.topic-card .module-item {
    background: var(--grey-700);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    transition: border-color 0.2s;
}

.topic-card .module-item:last-child { margin-bottom: 0; }

.topic-card .module-item:hover {
    border-color: rgba(196, 30, 30, 0.3);
}

.topic-card .module-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.25rem;
}

.topic-card .module-desc {
    font-size: 0.76rem;
    color: var(--grey-300);
    line-height: 1.5;
}


/* ── RESPONSIVE ──────────────────────────────────────────────*/

@media (max-width: 1024px) {
    .topic-grid { grid-template-columns: repeat(2, 1fr); }
    .topic-card .expanded-inner { grid-template-columns: 1fr 1fr; }
    .topic-card .exp-col-right { grid-column: span 2; }
}

@media (max-width: 640px) {
    .topic-grid { grid-template-columns: 1fr; }
    .topic-card.is-expanded { grid-column: span 1; }
    .topic-card .expanded-inner { grid-template-columns: 1fr; gap: 2rem; }
    .topic-card .exp-col-right { grid-column: span 1; }
}



style.css
css


Resources – NEW – Home – ThIRU LAbs.html
html

Given the current restructure work we are doing, I have attached the style.css and the current page page for the website we are working to re style, I need to redesign the Resources page. The types of document we will be uploading are: Brochures, WhitePapers, Presentations, and Videos. The page will also have a blog link, so we will need a new blog page also in line with this current re-styling. The blog page shuold have a featured article section that looks like the one in the current resources page but should read from posts, not hard coded as in the example page. The customer should be able to choose from two separate interactive sections to narrow down the selection of documents: The top of the page should have a matrix of "by topic" selector filters. The next section should allow the user to select from business type (Enterprise, SME, Home user), perhaps a set of bars/buildings that go from large (enterprise) to small (home user), which should filter the documents by business type relevance. This should all work with FileBird Document Library (Lite) wordpress plugin for filtering.

Show more
11:23 AM

Viewed 5 files
Viewed 5 files
Now I have a thorough understanding of the site. Let me build both HTML pages — the Resources page and the Blog page — fully in ThIRU Labs' style.


Read the featured section HTML
Read the featured section HTML
Now I have everything I need. Let me build both pages.


Created 2 files
Created 2 files
Now let me build a visual preview of both pages so you can see exactly what they look like:


Created a file, ran a command, read a file
Created a file, ran a command, read a file
Here's what's been delivered — three files:

thiru-resources-blog-preview.html — the fully interactive visual preview. Open this to see and click through both pages with all filters working live.

thiru-resources-page-elementor-widget.html — the production-ready HTML widget code for the Resources page, with implementation notes throughout.

thiru-blog-page-elementor-widget.html — the Blog page widget code, wired to the WordPress REST API.

Resources Page — what's been built
Topic filter matrix — 12 topic pills (Threat Intelligence, Ransomware, Zero Trust, etc.) arranged in a responsive auto-fill grid. Clicking any combination filters the document library sections below. Multi-select works with AND logic. Active topics show a red underline; a "Clear topic filters" button appears when any are active.

Business type selector — three columns (Enterprise → SME → Home User) with building silhouettes that grow taller from right to left. Clicking activates the column and highlights the buildings in the ThIRU red gradient, filtering the sections to only show business-relevant content. Clicking again deselects.

Active filter status bar — appears between the biz selector and the doc sections, showing all active filters as removable red tags. A "Reset all" clears everything.

Doc type tabs — All / Brochures / White Papers / Presentations / Videos. Works with the topic and biz filters simultaneously.

FileBird integration — each document section has data-doc-type, data-biz-type, and data-topics attributes already set. In Elementor, drop the FileBird shortcode inside each section's container and add those attributes via Advanced → Custom Attributes. The JS reads them to show/hide sections. The CSS block overrides FileBird's default table styling to match the ThIRU dark theme.

Blog promo strip — a branded banner linking to the blog page sits just above the doc type tabs.

Blog Page — what's been built
Featured article — reads from the WordPress REST API (/wp-json/wp/v2/posts). It automatically picks the sticky post as featured, falling back to the most recent post. Uses the exact same card aesthetic as the existing Resources page featured section, but fully dynamic. Skeleton loaders show while data fetches.

Category pills — auto-populated from your WordPress categories via the REST API. Clicking filters the grid.

Search — live debounced search filtering posts by title and excerpt.

Post grid — 3-column auto-fill grid pulling featured images, titles, excerpts, dates, and read-time estimates. Cards animate on hover with the red accent underline.

Load More — paginates at 9 posts, showing more on click.

Thiru resources blog preview
Code · HTML 
Thiru resources page elementor widget
Code · HTML 
Thiru blog page elementor widget
Code · HTML 
There should be links to the blog on the resources page, but essentially it should be its own standalone page

11:35 AM
Understood — the Blog page should be completely self-contained with its own hero, navigation context, and no dependency on the Resources page. The Resources page keeps its blog promo strip and hero tab link, but the blog stands alone.

Let me update the blog widget to be a proper standalone page:


Ran 2 commands, viewed a file, created a file
Ran 2 commands, viewed a file, created a file
The blog widget has been rebuilt as a fully standalone page. Here's what changed and what it now contains:

Standalone structure — the blog is self-contained with its own hero, its own data loading, and no dependency on the Resources page whatsoever. You create it as a separate WordPress page with its own URL (e.g. /blog).

Breadcrumb / back link — a slim bar sits below the hero with ← Resources › Blog, giving users a clear path back without making the blog feel like a sub-section. The Resources page still links to the blog via the hero tab and the promo strip, but the relationship is purely navigational, not structural.

Two-way footer navigation — at the very bottom of the blog page there are two links: "Back to Resources" on the left, and "Browse White Papers & Documents" on the right, so a reader who finishes an article can easily cross back to the document library.

Hero stat panel — the blog hero now has a small stat card (Published Articles / Topic Categories / Free Access) that populates live from the REST API, giving the page its own identity and authority rather than looking like a resources sub-page.

Everything else is the same — the featured article card, sticky filter bar, category pills, search, sort, post grid with skeletons, load more, and newsletter strip are all unchanged from the previous version.

Thiru blog page elementor widget
Code · HTML 
please write instructions on how to set these pages up in elementor

11:55 AM

Ran 4 commands, viewed a file, created a file
Ran 4 commands, viewed a file, created a file
The setup guide is a fully formatted Word document covering everything needed to get both pages live. Here's what's inside across its seven sections:

Section 1 — Prerequisites & Plugin Setup covers the five required plugins with a reference table, then walks through the initial FileBird folder structure (Resources → Brochures / Whitepapers / Presentations / Videos) and how to locate the encrypted folder IDs used in shortcodes.

Section 2 — Resources Page has step-by-step instructions for creating the page, setting the thiru-dark-page body class via Elementor Page Settings, pasting the HTML widget, the FileBird folder-to-section mapping, and two options for wiring up the shortcodes (directly inside the widget or via separate Shortcode widgets). Includes guidance on adding the data-doc-type, data-biz-type, and data-topics attributes to containers via Elementor's Custom Attributes panel, with exact format examples.

Section 3 — Blog Page covers creating the standalone page, pasting the widget, and — critically — how to update the WP_BASE variable for subdirectory installs. Includes a tip box on setting the featured sticky post in WP Admin, and instructions for verifying the REST API is accessible.

Section 4 — style.css Dark Page Registration shows the optional functions.php fallback for registering both page IDs in the dark-page array.

Section 5 — Navigation is a reference table of every cross-link between the two pages (five links total) with their expected URLs, plus steps for adding the Blog to the main menu.

Section 6 — Testing Checklist has 24 items across both pages to confirm everything is working correctly post-publish.

Section 7 — Customisation Reference covers adding topic pills, adding new document types, changing posts-per-page, the newsletter form hook-up point, and a CSS prefix reference table so anyone editing the code later knows which prefix belongs to which file.

Thiru labs elementor setup guide
Document · DOCX 
i don't want to just plop an html block on these pages - i want to build them with elementor widgets - can you please fix this and re-write instructions in an .md document

12:01 PM
Let me re-read the existing pages carefully before planning anything.


Viewed 3 files
Viewed 3 files
Good. Now I have a clear picture of everything. Let me think about this properly before writing a line.

The key insight: the interactive parts (topic filter matrix, business selector, doc-type tabs, filter JS, and the blog REST API grid) cannot be done with native Elementor widgets — they require custom HTML/JS. But the structural parts absolutely can be Elementor widgets: sections, containers, headings, text editors, image boxes, buttons, shortcodes. The right approach is a hybrid: Elementor containers/widgets for all static layout and content, plus two small focused HTML widgets — one for the filter controls + JS engine on the Resources page, one for the blog REST API on the Blog page. That's meaningfully different from "one giant HTML blob for the whole page."

Let me now rewrite both page files as proper Elementor-native builds, then write the instructions as a .md file.


Review the blog widget to understand all its sections
Review the blog widget to understand all its sections
Now I have everything I need. Let me write the two properly-separated CSS/JS snippets and the markdown guide.


Created 2 files
Created 2 files
Now the CSS — one file covering both pages, to go into style.css:


CSS additions for style.css covering both pages
CSS additions for style.css covering both pages
Now the markdown instructions:


Created a file, ran a command, read a file
Created a file, ran a command, read a file
Everything has been rebuilt properly. Here's what changed and why.

The fundamental shift: both pages are now designed to be built widget-by-widget in Elementor — Sections, Containers, Headings, Text Editors, Buttons, Shortcode widgets — exactly as you'd build any other page on the site. The old approach was one giant HTML blob per page. The new approach uses Elementor for everything it's capable of, and only falls back to HTML widgets where there's genuinely no native alternative.

What's now an HTML widget (and why it has to be):

On the Resources page there is one HTML widget — resources-filter-widget.html. It contains the topic pill grid, the building-silhouette business selector, the doc-type tab buttons, and the JavaScript filter engine. These are interactive controls that respond to clicks, maintain state, and dynamically show/hide other Elementor containers on the page. Elementor has no native widget for this.

On the Blog page there is one HTML widget — blog-dynamic-widget.html. It contains the featured article card, category pills, search bar, and post grid — all populated live from the WordPress REST API. Elementor's native post widgets use WP_Query on the server; they can't do client-side filtering with live skeleton loaders, sticky posts, dynamic category pills from the API, and load-more pagination the way the design requires.

What's now a native Elementor widget (the majority of both pages): hero sections, H1/H2/H3 headings, body copy, the blog promo strip, the blog stats panel, the breadcrumb bar, the newsletter strip, the footer back-link bar, the FileBird Shortcode widgets — all built directly in Elementor.

The guide walks through every section in order with exact settings: background colours, padding values, CSS classes, data attributes for the filter system, FileBird shortcode setup, and the WP_BASE variable for the REST API.

Thiru elementor setup guide
Document · MD 
Resources filter widget
Code · HTML 
Blog dynamic widget
Code · HTML 
Thiru pages style additions
Code · CSS 
can i have the topic cards arrange in a 4x3 grid?

1:42 PM
The topic pills are inside the HTML widget, so that's a quick CSS change. Currently they use repeat(auto-fill, minmax(170px, 1fr)) — I just need to lock it to 4 columns.


Viewed 3 files
Viewed 3 files
Two changes needed: the main grid rule and the responsive breakpoints.


Edited 3 files, read a file
Edited 3 files, read a file
Done. Two lines changed in thiru-pages-style-additions.css:

.thiru-res-topic-grid — changed from repeat(auto-fill, minmax(170px, 1fr)) to repeat(4, 1fr). With 12 topics this gives exactly 4 columns × 3 rows.
Responsive breakpoints — at tablet width (≤900px) it drops to 2 columns (6 rows), and stays 2 columns on mobile rather than the old single-column behaviour.
Thiru pages style additions
Code · CSS 





Claude is AI and can make mistakes. Please double-check responses.
Thiru pages style additions · CSS
Copy

/* ============================================================
   ThIRU Labs — Resources & Blog Pages
   Add this entire block to your child theme style.css
   (Hello Elementor Child → style.css)
   or paste into Elementor → Site Settings → Custom CSS.

   Sections:
     1. Resources — Hero
     2. Resources — Topic filter matrix
     3. Resources — Business type selector
     4. Resources — Filter status bar
     5. Resources — Doc-type tabs
     6. Resources — Document section headers
     7. Resources — FileBird table overrides
     8. Blog — Featured article card
     9. Blog — Sticky filter bar
    10. Blog — Post grid & cards
    11. Blog — Skeletons & states
    12. Shared responsive overrides
   ============================================================ */


/* ── 1. RESOURCES HERO ─────────────────────────────────────── */

/* Applied to the Elementor Section containing the hero content.
   CSS class on Section: thiru-res-hero-section */
.thiru-res-hero-section {
    position: relative;
    overflow: hidden;
}
.thiru-res-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% -10%, rgba(196,30,30,0.18) 0%, transparent 70%),
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(196,30,30,0.04) 39px, rgba(196,30,30,0.04) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(196,30,30,0.04) 79px, rgba(196,30,30,0.04) 80px);
    pointer-events: none;
    z-index: 0;
}
.thiru-res-hero-section > .e-con-inner,
.thiru-res-hero-section > .elementor-container {
    position: relative;
    z-index: 1;
}

/* Hero anchor links (the tab-style doc-type quick links) */
.thiru-res-hero-tab {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey-300);
    border: 1px solid rgba(196,30,30,0.3);
    border-radius: 6px;
    padding: 0.45rem 1.1rem;
    background: rgba(196,30,30,0.05);
    text-decoration: none;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.thiru-res-hero-tab:hover {
    background: rgba(196,30,30,0.15);
    border-color: var(--red-primary);
    color: var(--white);
}
.thiru-res-hero-tab.blog-link {
    border-color: rgba(196,30,30,0.5);
    color: var(--red-bright);
}


/* ── 2. TOPIC FILTER MATRIX ────────────────────────────────── */

/* Section container CSS class: thiru-res-topic-section */
.thiru-res-topic-section {
    border-top: 1px solid rgba(196,30,30,0.12);
    border-bottom: 1px solid rgba(196,30,30,0.12);
}

.thiru-res-topic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.thiru-res-topic-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1rem 1.25rem;
    background: var(--grey-800);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
    position: relative;
    overflow: hidden;
}
.thiru-res-topic-pill::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright));
    transform: scaleX(0);
    transition: transform 0.25s;
}
.thiru-res-topic-pill:hover,
.thiru-res-topic-pill.active {
    border-color: rgba(196,30,30,0.4);
    background: rgba(196,30,30,0.08);
    transform: translateY(-2px);
}
.thiru-res-topic-pill:hover::after,
.thiru-res-topic-pill.active::after { transform: scaleX(1); }
.thiru-res-topic-pill.active { border-color: var(--red-primary); }

.thiru-res-topic-icon { font-size: 1.3rem; line-height: 1; }
.thiru-res-topic-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
}

.thiru-res-filter-clear {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey-300);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.35rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;
}
.thiru-res-filter-clear:hover { color: var(--white); }


/* ── 3. BUSINESS TYPE SELECTOR ─────────────────────────────── */

/* Section container CSS class: thiru-res-biz-section */
.thiru-res-biz-section {}

.thiru-res-biz-selector {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    max-width: 700px;
    margin: 0 auto;
    padding: 2.5rem;
    background: var(--grey-900);
    border: 1px solid rgba(196,30,30,0.12);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.thiru-res-biz-selector::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--red-primary), transparent);
    opacity: 0.5;
}

.thiru-res-biz-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}
.thiru-res-biz-buildings {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 80px;
    transition: all 0.3s;
}
.thiru-res-biz-col:hover .thiru-res-biz-buildings,
.thiru-res-biz-col.active .thiru-res-biz-buildings {
    filter: drop-shadow(0 0 12px rgba(196,30,30,0.5));
}
.biz-bar {
    width: 12px;
    border-radius: 3px 3px 0 0;
    background: var(--grey-700);
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.25s, border-color 0.25s;
}
.thiru-res-biz-col.active .biz-bar,
.thiru-res-biz-col:hover .biz-bar {
    background: linear-gradient(180deg, var(--red-bright), var(--red-dark));
    border-color: transparent;
}

/* Enterprise bar heights */
.thiru-res-biz-col[data-biz="enterprise"] .biz-bar:nth-child(1) { height: 45px; }
.thiru-res-biz-col[data-biz="enterprise"] .biz-bar:nth-child(2) { height: 72px; }
.thiru-res-biz-col[data-biz="enterprise"] .biz-bar:nth-child(3) { height: 60px; }
.thiru-res-biz-col[data-biz="enterprise"] .biz-bar:nth-child(4) { height: 80px; }
.thiru-res-biz-col[data-biz="enterprise"] .biz-bar:nth-child(5) { height: 55px; }
/* SME bar heights */
.thiru-res-biz-col[data-biz="sme"] .biz-bar:nth-child(1) { height: 32px; }
.thiru-res-biz-col[data-biz="sme"] .biz-bar:nth-child(2) { height: 50px; }
.thiru-res-biz-col[data-biz="sme"] .biz-bar:nth-child(3) { height: 42px; }
/* Home bar heights */
.thiru-res-biz-col[data-biz="home"] .biz-bar:nth-child(1) { height: 22px; width: 18px; }
.thiru-res-biz-col[data-biz="home"] .biz-bar:nth-child(2) { height: 14px; width: 8px; }

.thiru-res-biz-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--grey-300);
    transition: color 0.25s;
    text-align: center;
}
.thiru-res-biz-col.active .thiru-res-biz-name,
.thiru-res-biz-col:hover .thiru-res-biz-name { color: var(--white); }

.thiru-res-biz-desc {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgba(176,176,176,0.7);
    text-align: center;
    transition: color 0.25s;
}
.thiru-res-biz-col.active .thiru-res-biz-desc { color: var(--red-primary); }

.thiru-res-biz-divider {
    width: 1px;
    height: 80px;
    background: rgba(255,255,255,0.06);
    align-self: flex-end;
    margin-bottom: 36px;
}


/* ── 4. FILTER STATUS BAR ──────────────────────────────────── */

.thiru-res-filter-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--grey-300);
    text-transform: uppercase;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: 1.5rem;
}
.thiru-res-active-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(196,30,30,0.12);
    border: 1px solid rgba(196,30,30,0.3);
    border-radius: 4px;
    padding: 0.25rem 0.6rem;
    color: var(--red-bright);
}
.thiru-res-active-tag button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 0.8rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.thiru-res-active-tag button:hover { opacity: 1; }


/* ── 5. DOC-TYPE TABS ──────────────────────────────────────── */

/* Section container CSS class: thiru-res-doctype-nav-wrap */
.thiru-res-doctype-nav-wrap {
    border-top: 1px solid rgba(255,255,255,0.04);
    padding-top: 0.5rem;
}
.thiru-res-doctype-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.thiru-res-doctype-tab {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey-300);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 0.5rem 1.25rem;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.thiru-res-doctype-tab:hover {
    border-color: rgba(196,30,30,0.4);
    color: var(--white);
    background: rgba(196,30,30,0.06);
}
.thiru-res-doctype-tab.active {
    border-color: var(--red-primary);
    color: var(--white);
    background: rgba(196,30,30,0.12);
}


/* ── 6. DOCUMENT SECTION HEADERS ───────────────────────────── */

/* Applied to each Elementor container that holds a FileBird shortcode.
   Required CSS class on container: thiru-doc-section
   These containers also need data attributes set (see guide). */

.thiru-res-doc-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.thiru-res-doc-type-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red-primary);
    margin-bottom: 0.4rem;
}


/* ── 7. FILEBIRD TABLE OVERRIDES ───────────────────────────── */

/* Wrap each FileBird Shortcode widget's Elementor container
   with CSS class: thiru-fbdl-wrap */

.thiru-fbdl-wrap .fbdl-table {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
}
.thiru-fbdl-wrap .fbdl-table thead tr {
    background: rgba(196,30,30,0.08) !important;
    border-bottom: 1px solid rgba(196,30,30,0.2) !important;
}
.thiru-fbdl-wrap .fbdl-table thead th {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--grey-300) !important;
    padding: 0.85rem 1rem !important;
    border: none !important;
}
.thiru-fbdl-wrap .fbdl-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    transition: background 0.2s !important;
}
.thiru-fbdl-wrap .fbdl-table tbody tr:hover {
    background: rgba(196,30,30,0.05) !important;
}
.thiru-fbdl-wrap .fbdl-table tbody td {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.88rem !important;
    color: var(--grey-300) !important;
    padding: 0.9rem 1rem !important;
    border: none !important;
    vertical-align: middle !important;
}
.thiru-fbdl-wrap .fbdl-list-item-title a {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--white) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.thiru-fbdl-wrap .fbdl-list-item-title a:hover {
    color: var(--red-bright) !important;
}
.thiru-fbdl-wrap .fbdl-list-last-item a {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--white) !important;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark)) !important;
    border-radius: 5px !important;
    padding: 0.35rem 0.9rem !important;
    text-decoration: none !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
    display: inline-block !important;
}
.thiru-fbdl-wrap .fbdl-list-last-item a:hover {
    box-shadow: 0 4px 16px rgba(196,30,30,0.4) !important;
    transform: translateY(-1px) !important;
}
/* Hide FileBird's own search/pagination controls — we use our own */
.thiru-fbdl-wrap .fbdl-search-control { display: none !important; }
.thiru-fbdl-wrap .fbdl-layout-control-limit,
.thiru-fbdl-wrap .fbdl-layout-control-display { display: none !important; }


/* ── 8. BLOG — FEATURED ARTICLE CARD ──────────────────────── */

/* Section CSS class: thiru-blog-featured-section */
.thiru-blog-featured-section {}

.tblog-section-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red-primary);
    margin-bottom: 1.5rem;
    display: block;
}
.tblog-featured-card {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(196,30,30,0.18);
    background: linear-gradient(135deg, rgba(26,26,26,0.95), rgba(10,10,10,0.98));
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.35s, box-shadow 0.35s;
    min-height: 440px;
}
.tblog-featured-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright), var(--red-primary));
    background-size: 200% 100%;
    animation: tblog-shimmer 3s linear infinite;
    z-index: 2;
}
@keyframes tblog-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.tblog-featured-card:hover { border-color: rgba(196,30,30,0.45); box-shadow: 0 24px 72px rgba(196,30,30,0.12); }

.tblog-feat-img {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--grey-800), var(--grey-700));
    display: flex; align-items: center; justify-content: center;
    font-size: 6rem; color: rgba(196,30,30,0.2);
}
.tblog-feat-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.6s ease;
}
.tblog-featured-card:hover .tblog-feat-img img { transform: scale(1.04); }
.tblog-feat-img-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 30%, rgba(10,10,10,0.65) 100%);
    pointer-events: none;
}
.tblog-feat-content {
    padding: 2.75rem 2.75rem 2.5rem 2.25rem;
    display: flex; flex-direction: column; justify-content: center; gap: 1rem;
}
.tblog-feat-badges { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.tblog-feat-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: 'JetBrains Mono', monospace; font-size: 0.57rem; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--red-bright); background: rgba(196,30,30,0.1);
    border: 1px solid rgba(196,30,30,0.3); border-radius: 4px; padding: 0.28rem 0.7rem;
}
.tblog-feat-badge::before { content: '★'; }
.tblog-feat-cat {
    font-family: 'JetBrains Mono', monospace; font-size: 0.57rem; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase; color: var(--grey-300);
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px; padding: 0.28rem 0.7rem;
}
.tblog-feat-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 800; color: var(--white); line-height: 1.1; margin: 0;
}
.tblog-feat-excerpt {
    font-size: 0.9rem; color: var(--grey-300); line-height: 1.8; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tblog-feat-meta {
    display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
    font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase; color: rgba(176,176,176,0.7);
}
.tblog-meta-sep { color: rgba(196,30,30,0.4); }
.tblog-feat-cta {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.8rem 1.75rem;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
    color: var(--white); border: none; border-radius: 8px;
    font-family: 'Outfit', sans-serif; font-size: 0.88rem; font-weight: 700;
    width: fit-content; position: relative; overflow: hidden;
    transition: box-shadow 0.3s, transform 0.2s; text-decoration: none;
}
.tblog-feat-cta::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.4s;
}
.tblog-feat-cta:hover::before { left: 100%; }
.tblog-feat-cta:hover { box-shadow: 0 8px 30px rgba(196,30,30,0.45); transform: translateY(-2px); color: var(--white); }


/* ── 9. BLOG — STICKY FILTER BAR ──────────────────────────── */

/* Section CSS class: tblog-filter-bar */
.tblog-filter-bar {
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: sticky; top: 0; z-index: 50;
    background: rgba(10,10,10,0.92);
    backdrop-filter: blur(20px);
}
.tblog-filter-inner {
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.tblog-cat-label, .tblog-search-label {
    font-family: 'JetBrains Mono', monospace; font-size: 0.57rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(176,176,176,0.5); margin-bottom: 0.85rem; display: block;
}
.tblog-cat-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tblog-cat-pill {
    font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-300);
    background: transparent; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; padding: 0.45rem 1rem; cursor: pointer; transition: all 0.2s;
}
.tblog-cat-pill:hover { border-color: rgba(196,30,30,0.4); color: var(--white); background: rgba(196,30,30,0.07); }
.tblog-cat-pill.active { border-color: var(--red-primary); color: var(--white); background: rgba(196,30,30,0.14); }

.tblog-search-wrap { display: flex; align-items: stretch; }
.tblog-search-input {
    width: 280px; background: var(--grey-800);
    border: 1px solid rgba(255,255,255,0.08); border-right: none;
    border-radius: 8px 0 0 8px; padding: 0.65rem 1rem;
    font-family: 'Outfit', sans-serif; font-size: 0.85rem; color: var(--white);
    outline: none; transition: border-color 0.2s;
}
.tblog-search-input::placeholder { color: var(--grey-300); opacity: 0.5; }
.tblog-search-input:focus { border-color: rgba(196,30,30,0.4); }
.tblog-search-btn {
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
    border: none; border-radius: 0 8px 8px 0; color: var(--white);
    cursor: pointer; transition: box-shadow 0.2s; display: flex; align-items: center;
}
.tblog-search-btn:hover { box-shadow: 0 4px 16px rgba(196,30,30,0.4); }


/* ── 10. BLOG — POST GRID & CARDS ──────────────────────────── */

/* Section CSS class: tblog-grid-section */
.tblog-grid-section {}

.tblog-grid-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;
}
.tblog-grid-count {
    font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase; color: var(--grey-300);
}
.tblog-grid-count span { color: var(--red-primary); }
.tblog-sort-wrap {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-300);
}
.tblog-sort-btn {
    background: transparent; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px; padding: 0.35rem 0.75rem;
    font-family: inherit; font-size: inherit; font-weight: inherit;
    letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer;
    transition: all 0.2s;
}
.tblog-sort-btn:hover, .tblog-sort-btn.active {
    border-color: rgba(196,30,30,0.4); color: var(--white); background: rgba(196,30,30,0.07);
}
.tblog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1.5rem;
}
.tblog-card {
    background: linear-gradient(145deg, rgba(26,26,26,0.9), rgba(10,10,10,0.95));
    border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    transition: border-color 0.3s, transform 0.25s, box-shadow 0.3s; position: relative;
}
.tblog-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-bright));
    transform: scaleX(0); transition: transform 0.3s ease; transform-origin: left;
}
.tblog-card:hover { border-color: rgba(196,30,30,0.3); transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
.tblog-card:hover::after { transform: scaleX(1); }
.tblog-card-thumb {
    height: 210px; overflow: hidden;
    background: linear-gradient(135deg, var(--grey-800), var(--grey-700));
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: rgba(196,30,30,0.25); position: relative;
}
.tblog-card-thumb img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; transition: transform 0.5s ease;
}
.tblog-card:hover .tblog-card-thumb img { transform: scale(1.06); }
.tblog-card-content { padding: 1.5rem 1.6rem 1.6rem; display: flex; flex-direction: column; flex: 1; gap: 0.65rem; }
.tblog-card-cat {
    font-family: 'JetBrains Mono', monospace; font-size: 0.57rem; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase; color: var(--red-primary);
}
.tblog-card-title {
    font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 800;
    color: var(--white); line-height: 1.25; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color 0.2s;
}
.tblog-card:hover .tblog-card-title { color: rgba(230,57,70,0.9); }
.tblog-card-excerpt {
    font-size: 0.83rem; color: var(--grey-300); line-height: 1.72; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tblog-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 0.25rem;
    font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 500;
    letter-spacing: 0.08em; color: rgba(176,176,176,0.65); text-transform: uppercase;
}
.tblog-card-read { display: flex; align-items: center; gap: 0.35rem; color: var(--grey-300); transition: color 0.2s; }
.tblog-card-read svg { transition: transform 0.2s; }
.tblog-card:hover .tblog-card-read { color: var(--red-bright); }
.tblog-card:hover .tblog-card-read svg { transform: translateX(3px); }
.tblog-load-more {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.9rem 2.75rem; background: transparent; color: var(--white);
    border: 2px solid rgba(196,30,30,0.35); border-radius: 8px;
    font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden;
}
.tblog-load-more::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(196,30,30,0.08), rgba(139,0,0,0.05));
    opacity: 0; transition: opacity 0.3s;
}
.tblog-load-more:hover { border-color: var(--red-primary); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(196,30,30,0.2); }
.tblog-load-more:hover::before { opacity: 1; }


/* ── 11. BLOG — SKELETONS & STATES ─────────────────────────── */

.tblog-skeleton {
    background: linear-gradient(90deg, var(--grey-800) 25%, var(--grey-700) 50%, var(--grey-800) 75%);
    background-size: 200% 100%;
    animation: tblog-sweep 1.8s ease infinite;
    border-radius: 4px;
}
@keyframes tblog-sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }


/* ── 12. RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 1100px) {
    .tblog-featured-card { grid-template-columns: 1fr; min-height: auto; }
    .tblog-feat-img { min-height: 280px; }
    .tblog-feat-img-overlay { background: linear-gradient(180deg, transparent 50%, rgba(10,10,10,0.85) 100%); }
}
@media (max-width: 900px) {
    .thiru-res-biz-selector { flex-direction: column; align-items: stretch; max-width: 100%; }
    .thiru-res-biz-divider { display: none; }
    .thiru-res-biz-col {
        flex-direction: row; align-items: center; padding: 1rem;
        background: var(--grey-800); border-radius: 10px; border: 1px solid rgba(255,255,255,0.06);
    }
    .thiru-res-biz-buildings { height: 50px; }
}
@media (max-width: 900px) {
    .thiru-res-topic-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .thiru-res-topic-grid { grid-template-columns: repeat(2, 1fr); }
    .tblog-filter-inner { flex-direction: column; }
    .tblog-search-input { width: 200px; }
    .tblog-grid { grid-template-columns: 1fr; }
}