<!-- /* ================= HERO RE-ENGINEERING SYSTEM ================= */ -->
    
      .premium-hero-layout {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        padding: 100px 0 120px 0;
        overflow: hidden;
        position: relative;
      }

      /* Subtle background grid lines changed from white to a soft dark tint */
      .premium-hero-layout::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(15, 23, 42, 0.02) 1px, transparent 1px),
          linear-gradient(90deg, rgba(15, 23, 42, 0.02) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none;
      }

      /* Micro SEO Heading Tag Element - Tint adjusted for light BG */
      .seo-micro-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.2);
        padding: 6px 16px;
        border-radius: 50px;
      }

      .seo-micro-pill h1 {
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #ffc600; /* Darker amber for readability */
        margin: 0;
      }

      .pulse-indicator {
        width: 6px;
        height: 6px;
        background-color: #10b981;
        border-radius: 50%;
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
        animation: pulseGlow 1.8s infinite;
      }

      /* Typography Engineering - Swapped from white to readable dark slate */
      .hero-main-title {
        font-size: 3rem;
        line-height: 1.2;
        letter-spacing: -0.8px;
        color: #0f172a; /* Dark text */
      }

      /* Rich text gradient style instead of flat glow for light themes */
      .text-warning-glow {
        color: #ffc600;
      }

      .hero-description {
        font-size: 1.1rem;
        line-height: 1.7;
        color: #334155; /* Mid-slate gray */
        max-width: 520px;
      }

      /* THE QUANTUM BUTTON ENGINE */
      /* THE QUANTUM BUTTON ENGINE - LIGHT THEME OPTIMIZED */
      .btn-quantum-action {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        background: #17a2b8;
        color: #ffffff !important;
        font-weight: 700;
        font-size: 1.05rem;
        letter-spacing: -0.3px;
        text-decoration: none;
        padding: 6px 6px 6px 24px;
        border-radius: 100px;
        position: relative;
        overflow: hidden;
        min-width: 280px; /* Marginally widened to hold the expanding pill safely */
        box-shadow:
          0 10px 25px rgba(15, 23, 42, 0.15),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1;
      }

      .btn-content-left {
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 3;
      }

      /* Operational Pulse Indicator */
      .btn-status-pulse {
        width: 7px;
        height: 7px;
        background-color: #10b981;
        border-radius: 50%;
        position: relative;
        transition: background-color 0.3s ease;
      }
      .btn-status-pulse::after {
        content: "";
        position: absolute;
        inset: -4px;
        border: 1px solid #10b981;
        color: #ffc600;
        border-radius: 50%;
        opacity: 0.4;
        animation: pulseRing 1.6s infinite ease-out;
      }

      /* THE MORPHING ICON WRAPPER */
      .btn-icon-wrapper {
        width: 40px;
        height: 40px;
        background: #ffffff;
        color: #0f172a;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        z-index: 3;
        /* This smoothbezier drives the clean fluid morph speed */
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      }

      /* Default Arrow icon alignment */
      .btn-icon-orig {
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
          opacity 0.3s ease;
      }

      /* Hidden Reveal Layer Configuration */
      .btn-hover-reveal-box {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 8px;
        opacity: 0;
        transform: translateX(-30px);
        transition:
          transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
          opacity 0.3s ease;
        padding: 0 12px;
        white-space: nowrap;
      }

      /* Surprise Micro-Badge inside the wrapper */
      .btn-hover-badge {
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        background: #0f172a;
        color: #ffffff;
        padding: 3px 8px;
        border-radius: 30px;
        letter-spacing: 0.3px;
      }

      /* Success Checkmark icon styling */
      .btn-icon-hover {
        font-size: 1.1rem;
        color: #10b981; /* Changes checkmark to green on completion */
        font-weight: 900;
      }

      /* Shimmer Light Reflection Sweep */
      .btn-shimmer-sweep {
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.25) 50%,
          rgba(255, 255, 255, 0) 100%
        );
        transform: skewX(-25deg);
        z-index: 2;
      }

      /* ================= HOVER STATES ================= */

      .btn-quantum-action:hover {
        transform: translateY(-3px);
      }

      /* 1. Icon wrapper breaks circle boundary and shifts into a wide pill shape */
      .btn-quantum-action:hover .btn-icon-wrapper {
        width: 115px;
        border-radius: 30px;
        background: #ffffff;
      }

      /* 2. Original arrow glides completely out of frame to the right */
      .btn-quantum-action:hover .btn-icon-orig {
        opacity: 0;
        transform: translateX(40px);
      }

      /* 3. Success package snaps elegantly into view from left to center center */
      .btn-quantum-action:hover .btn-hover-reveal-box {
        opacity: 1;
        transform: translateX(0);
      }

      /* 4. Shimmer effect runs across primary label background */
      .btn-quantum-action:hover .btn-shimmer-sweep {
        animation: shimmerEffect 0.8s ease-out;
      }

      /* 5. Invert indicator point contrast natively */
      .btn-quantum-action:hover .btn-status-pulse,
      .btn-quantum-action:hover .btn-status-pulse::after {
        background-color: #0f172a;
        border-color: #0f172a;
      }

      /* ANIMATION TIMELINES */
      @keyframes pulseRing {
        0% {
          transform: scale(0.5);
          opacity: 1;
        }
        100% {
          transform: scale(1.8);
          opacity: 0;
        }
      }

      @keyframes shimmerEffect {
        100% {
          left: 150%;
        }
      }

      /* ANIMATION TIMELINES */
      @keyframes pulseRing {
        0% {
          transform: scale(0.5);
          opacity: 1;
        }
        100% {
          transform: scale(1.8);
          opacity: 0;
        }
      }

      @keyframes shimmerEffect {
        100% {
          left: 150%;
        }
      }

      /* Trust Validation Labels Row */
      .hero-trust-row {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.85rem;
        color: #475569; /* Slate gray labels */
      }

      .divider-dot {
        color: #cbd5e1;
      }

      /* INTERACTIVE VISUAL DISPLAY PANELS (Right Side) */
      .hero-visual-engine {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }

      .mockup-display-container {
        position: relative;
        width: 100%;
        max-width: 520px;
        height: 450px;
      }

      .mockup-layer {
        position: absolute;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12); /* Softer shadows for light themes */
        transition: transform 0.4s ease;
      }

      .mockup-layer img {
        width: 100%;
        height: auto;
        display: block;
      }

      /* Foreground focal template mockup placement */
      .layer-primary {
        width: 320px;
        left: 40px;
        top: 20px;
        z-index: 3;
        border: 1px solid #e2e8f0;
      }

      /* Background canvas layout structure layer */
      .layer-secondary {
        width: 300px;
        right: 0;
        top: 80px;
        z-index: 1;
        opacity: 0.8; /* Higher opacity to remain clean over light yellow */
        transform: scale(0.95);
        filter: blur(0.5px);
      }

      /* Hover matrix adjustments for active design interactions */
      .mockup-display-container:hover .layer-primary {
        transform: scale(1.02) translateY(-5px);
        z-index: 4;
      }

      .mockup-display-container:hover .layer-secondary {
        transform: translateX(10px) scale(0.98);
        opacity: 0.95;
      }

      /* Functional Accent Overlay Card */
      .floating-features-card {
        position: absolute;
        bottom: 40px;
        left: 0;
        background: #ffffff;
        border-radius: 16px;
        padding: 16px 20px;
        z-index: 5;
        box-shadow: 0 15px 35px rgba(15, 23, 42, 0.1);
        display: flex;
        flex-direction: column;
        gap: 10px;
        border: 1px solid #e2e8f0;
      }

      .feat-item {
        font-size: 0.85rem;
        font-weight: 700;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      /* Keyframe Animations */
      @keyframes pulseGlow {
        0% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
        }
        70% {
          transform: scale(1);
          box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
        }
        100% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
        }
      }

      /* RESPONSIVE DESIGN MEDIA OVERRIDES */
      @media (max-width: 991px) {
        .premium-hero-layout {
          padding: 60px 0 80px 0;
        }
        .hero-text-engine {
          text-align: center !important;
          margin-bottom: 60px;
        }
        .hero-description {
          margin: 20px auto 0 auto;
        }
        .hero-trust-row {
          justify-content: center;
        }
        .hero-visual-engine {
          justify-content: center;
        }
        .mockup-display-container {
          max-width: 450px;
          height: 380px;
        }
        .layer-primary {
          width: 260px;
          left: 20px;
        }
        .layer-secondary {
          width: 240px;
        }
      }

      @media (max-width: 480px) {
        .hero-main-title {
          font-size: 2.1rem;
        }
        .mockup-display-container {
          display: none;
        }
      }
    

    
      .template-showcase-section .row {
        row-gap: 1rem !important; /* Forces a uniform 40px gap between grid rows */
      }
      .seo-pill-accent {
        display: inline-block;
        background-color: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.2);
        color: #b45309;
        padding: 4px 14px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-radius: 50px;
      }

      /* CARDS STRUCTURAL LOGIC */
      .premium-template-card {
        background: #ffffff !important;
        border: 1px solid #eef1f6 !important;
        border-radius: 20px !important;
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02) !important;
        display: flex;
        flex-direction: column;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }

      /* Card Heading - Changed to h3 for correct document flow nesting */
      .template-card-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
        letter-spacing: -0.2px;
      }

      /* Image containment layer to handle micro hover scaling effects cleanly */
      .template-preview-wrapper {
        background-color: #f8fafc;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #f1f5f9;
        position: relative;
      }

      .template-preview-wrapper img {
        transition: transform 0.4s ease;
      }

      .template-card-description {
        font-size: 0.88rem;
        color: #475569;
        line-height: 1.6;
        margin-bottom: 20px;
      }

      /* THE UNIQUE DYNAMIC DOWNLOAD CAPSULE */
      .btn-template-download {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        background-color: #0f172a;
        color: #ffffff !important;
        font-weight: 700;
        font-size: 0.9rem;
        text-decoration: none;
        padding: 4px 4px 4px 18px;
        border-radius: 50px;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .dl-icon {
        width: 32px;
        height: 32px;
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        transition: all 0.4s ease;
      }

      /* HOVER FEEDBACK SYSTEM */
      .premium-template-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(15, 23, 42, 0.06) !important;
        border-color: #cbd5e1 !important;
      }

      .premium-template-card:hover .template-preview-wrapper img {
        transform: scale(1.03);
      }

      .premium-template-card:hover .btn-template-download {
        background-color: #f59e0b;
        color: #0f172a !important;
      }

      .premium-template-card:hover .dl-icon {
        background-color: #0f172a;
        color: #f59e0b;
        transform: translateY(
          1px
        ); /* micro nudging to emphasize downward downloading action */
      }
    

    
      .premium-advantages-section {
        font-family: "Segoe UI", Roboto, sans-serif;
        overflow: hidden;
      }

      .seo-pill-accent {
        display: inline-block;
        background-color: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.2);
        color: #b45309;
        padding: 4px 14px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-radius: 50px;
      }

      .section-title-clash {
        font-size: 2.3rem;
        letter-spacing: -0.6px;
      }

      /* STRUCTURAL ROW PACING */
      .advantages-flow-stack {
        display: flex;
        flex-direction: column;
        gap: 80px; /* Generous vertical spacing for modern visual breathability */
        margin-top: 50px;
      }

      .advantage-row-item {
        transition: all 0.3s ease;
      }

      /* CONTENT ELEMENTS */
      .benefit-step-indicator {
        font-size: 0.95rem;
        font-weight: 800;
        color: #f59e0b;
        font-family: monospace;
        margin-bottom: 5px;
      }

      .advantage-info-capsule h3 {
        font-size: 1.6rem;
        letter-spacing: -0.4px;
        line-height: 1.3;
      }

      .text-muted-slate {
        color: #475569;
        font-size: 1rem;
        line-height: 1.65;
      }

      /* ABSTRACT VISUAL DECK PANELS (Right/Left Dynamic Graphics) */
      .advantage-visual-panel {
        min-height: 200px;
        border-radius: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        position: relative;
        border: 1px solid rgba(15, 23, 42, 0.04);
        box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.01);
      }

      /* Color palettes tuned to separate the cards subtly over the warm yellow background */
      .panel-tint-amber {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
      }
      .panel-tint-slate {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
      }
      .panel-tint-indigo {
        background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
      }
      .panel-tint-emerald {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
      }

      /* MINI DASHBOARD ELEMENTS SIMULATOR */
      .mini-ui-card {
        background: #ffffff;
        border-radius: 16px;
        padding: 20px;
        width: 100%;
        max-width: 320px;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
        border: 1px solid #ffffff;
      }

      .ui-dot-green {
        display: block;
        width: 10px;
        height: 10px;
        background-color: #10b981;
        border-radius: 50%;
        margin-bottom: 12px;
      }

      .ui-line-thick {
        height: 8px;
        background-color: #0f172a;
        border-radius: 4px;
      }

      .ui-line-thin {
        height: 6px;
        background-color: #94a3b8;
        border-radius: 4px;
      }

      .ui-block-meta {
        font-size: 11px;
        font-weight: 700;
        color: #475569;
      }

      /* Swatch simulator specific styles */
      .theme-palette-swatch {
        background: #ffffff;
        padding: 12px 20px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
      }

      .color-dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 6px;
      }
      .color-indigo {
        background-color: #4f46e5;
      }
      .color-amber {
        background-color: #f59e0b;
      }
      .color-dark {
        background-color: #0f172a;
      }

      /* Micro interaction spin for sync icon */
      .spin-sync {
        display: inline-block;
        animation: smoothRotation 12s linear infinite;
      }

      @keyframes smoothRotation {
        100% {
          transform: rotate(360deg);
        }
      }

      /* RESPONSIVE RETUNING */
      @media (max-width: 991px) {
        .advantages-flow-stack {
          gap: 50px;
        }
        .section-title-clash {
          font-size: 1.9rem;
        }
        .advantage-visual-panel {
          min-height: 160px;
          padding: 20px;
        }
      }
    

    
      /* --- FORCED SPACERS (FIXES YOUR ISSUE) --- */

      /* Generates a strict, clean gap between main box icons and the header text */
      .heading-with-icon {
        margin-left: 18px !important;
      }

      /* Generates an explicit, highly visible gap between smaller check/info icons and text headings */
      .card-icon {
        margin-right: 14px !important;
        display: inline-block;
        vertical-align: middle;
      }

      /* Generates an explicit gap between the step number and internal card content text descriptions */
      .anatomy-step-item div {
        margin-left: 15px !important;
      }

      /* --- PREEXISTING STYLING CORE --- */
      .seo-badge-pill {
        display: inline-block;
        background-color: rgba(217, 119, 6, 0.08);
        border: 1px solid rgba(217, 119, 6, 0.2);
        color: #b45309;
        padding: 4px 14px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-radius: 50px;
      }

      .text-amber-accent {
        color: #d97706;
      }

      .accent-line-glow {
        width: 60px;
        height: 4px;
        background: linear-gradient(90deg, #d97706, transparent);
        border-radius: 20px;
      }

      .definition-glass-card {
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(217, 119, 6, 0.15);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.01);
        backdrop-filter: blur(8px);
      }

      .anatomy-panel {
        background: #ffffff;
        border: 1px solid #eef1f6;
        border-radius: 24px;
        box-shadow: 0 4px 25px rgba(15, 23, 42, 0.02);
      }

      .benefits-panel {
        border: 1px solid #eef1f6;
        border-radius: 24px;
        box-shadow: 0 4px 25px rgba(15, 23, 42, 0.02);
      }

      .panel-icon-box {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background-color: #0f172a;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
      }

      .panel-icon-box.amber-tint {
        background-color: #d97706;
      }

      .anatomy-interactive-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
      }

      .anatomy-step-item {
        display: flex;
        align-items: flex-start;
        padding-bottom: 15px;
        border-bottom: 1px dashed #f1f5f9;
      }

      .anatomy-step-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }

      .step-marker {
        font-size: 0.75rem;
        font-weight: 800;
        background-color: #f1f5f9;
        color: #64748b;
        padding: 2px 8px;
        border-radius: 6px;
        margin-top: 3px;
        flex-shrink: 0;
      }

      .anatomy-step-item strong {
        font-size: 0.95rem;
        color: #0f172a;
        display: block;
        margin-bottom: 2px;
      }

      .benefit-strategy-card h5 {
        font-size: 1rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
      }

      .sticky-note-box {
        background-color: #fffbeb;
        border-left: 4px solid #f59e0b;
        border-radius: 12px;
      }

      @media (max-width: 991px) {
        .anatomy-panel,
        .benefits-panel {
          padding: 25px !important;
        }
      }
    


      .seo-badge-pill {
        display: inline-block;
        background-color: rgba(217, 119, 6, 0.08);
        border: 1px solid rgba(217, 119, 6, 0.2);
        color: #b45309;
        padding: 4px 14px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-radius: 50px;
      }

      /* STICKY COLUMN MECHANICS */
      @media (min-width: 992px) {
        .faq-sticky-anchor {
          position: sticky;
          top: 40px;
        }
      }

      /* SIDE BAR CTA HIGHLIGHT BOX */
      .faq-cta-card {
        background-color: #ffffff;
        border: 1px solid #eef1f6;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02);
      }

      .faq-btn-link {
        display: inline-flex;
        align-items: center;
        color: #d97706 !important;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.9rem;
        transition: opacity 0.2s ease;
      }

      /* Clean, explicit space separating text from the link arrow icon */
      .faq-btn-icon {
        margin-left: 10px !important;
        transition: transform 0.3s ease;
      }

      .faq-btn-link:hover {
        opacity: 0.85;
      }
      .faq-btn-link:hover .faq-btn-icon {
        transform: translateX(4px);
      }

      /* ACCORDION DECK CONTAINER STYLING */
      .faq-accordion-deck {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .faq-schema-item {
        background: #ffffff;
        border: 1px solid #eef1f6;
        border-radius: 16px;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        overflow: hidden;
      }

      /* INTERACTIVE TRIGGER HEADER */
      .faq-trigger-header {
        padding: 22px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        user-select: none;
      }

      /* Balanced styling separating the header title text from the toggle indicator icon */
      .faq-question-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
        line-height: 1.4;
        margin-right: 20px !important; /* Forces strict spacing buffer before icon triggers */
      }

      .faq-toggle-indicator {
        width: 28px;
        height: 28px;
        background-color: #f8fafc;
        color: #64748b;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        flex-shrink: 0;
        transition: all 0.3s ease;
      }

      /* CONTENT CONTAINER EXTENSION STYLING */
      .faq-content-body {
        padding: 0 24px 22px 24px;
        font-size: 0.95rem;
        line-height: 1.6;
      }

      /* VISUAL ACTIVE HOVER STATES */
      .faq-schema-item:hover {
        border-color: #cbd5e1;
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.02);
      }

      .faq-schema-item:hover .faq-toggle-indicator {
        background-color: #0f172a;
        color: #ffffff;
      }
    

    
      .hub-pill-accent {
        display: inline-block;
        background-color: rgba(217, 119, 6, 0.08);
        border: 1px solid rgba(217, 119, 6, 0.2);
        color: #b45309;
        padding: 4px 14px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-radius: 50px;
      }

      .hub-line-glow {
        width: 50px;
        height: 4px;
        background: linear-gradient(90deg, #d97706, transparent);
        border-radius: 20px;
      }

      /* VERTICAL SPACING FOR COLUMN SEGMENTS */
      .hub-category-stack {
        display: flex;
        flex-direction: column;
        gap: 14px; /* Native gap spacing removes need for break elements */
      }

      /* INTERACTIVE CARD FRAME */
      .hub-link-card {
        display: flex;
        align-items: center;
        background: #ffffff;
        border: 1px solid #eef1f6;
        padding: 14px 18px;
        border-radius: 16px;
        text-decoration: none !important;
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 4px 15px rgba(15, 23, 42, 0.01);
      }

      /* STRICT ICON GAP MECHANICS */
      .hub-icon-wrapper {
        width: 42px;
        height: 42px;
        background-color: #f8fafc;
        color: #64748b;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        flex-shrink: 0;
        transition: all 0.35s ease;
        margin-right: 16px !important; /* Forced visual buffer separating the icon box from typography text */
      }

      /* TYPOGRAPHY BLOCKS */
      .hub-text-block {
        display: flex;
        flex-direction: column;
      }

      .hub-title {
        font-size: 0.98rem;
        font-weight: 700;
        color: #0f172a;
        transition: color 0.3s ease;
      }

      .hub-tag {
        font-size: 0.78rem;
        color: #64748b;
        margin-top: 2px;
      }

      /* HOVER & TRANSITION INTERACTION STATES */
      .hub-link-card:hover {
        transform: translateY(-3px);
        border-color: #cbd5e1;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
        background-color: #ffffff;
      }

      .hub-link-card:hover .hub-icon-wrapper {
        background-color: #0f172a;
        color: #ffffff;
        transform: scale(1.05);
      }

      .hub-link-card:hover .hub-title {
        color: #d97706; /* Smooth golden transition to follow light colorways */
      }
    

    
      /* ================= BILLING HUB LAYOUT STYLING ================= */
      .hub-badge-pill {
        display: inline-block;
        background-color: rgba(217, 119, 6, 0.08);
        border: 1px solid rgba(217, 119, 6, 0.2);
        color: #b45309;
        padding: 4px 14px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-radius: 50px;
      }

      .hub-line-glow {
        width: 50px;
        height: 4px;
        background: linear-gradient(90deg, #d97706, transparent);
        border-radius: 20px;
      }

      /* HORIZONTAL NAVIGATION BAR DECK */
      .invoice-filter-deck {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .filter-trigger {
        background-color: #ffffff;
        border: 1px solid #eef1f6;
        color: #64748b;
        font-size: 0.88rem;
        font-weight: 700;
        padding: 8px 18px;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.25s ease;
      }

      .filter-trigger:hover,
      .filter-trigger.active {
        background-color: #0f172a;
        color: #ffffff;
        border-color: #0f172a;
      }

      /* ADAPTIVE LAYOUT GRID SYSTEM */
      .template-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
        margin-top: 25px;
      }

      /* RE-ENGINEERED DIRECTORY LINK CARDS */
      .business-card {
        display: flex;
        align-items: center;
        background: #ffffff;
        border: 1px solid #eef1f6;
        padding: 12px 16px;
        border-radius: 14px;
        text-decoration: none !important;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        opacity: 1;
      }

      /* STRICT ICON TO TEXT SPACING BUFFER (FIXES CLUMPING) */
      .card-icon-frame {
        width: 36px;
        height: 36px;
        background-color: #f8fafc;
        color: #64748b;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
        flex-shrink: 0;
        margin-right: 14px !important; /* Fixed visual margin separation rule */
        transition: all 0.3s ease;
      }

      .card-title-text {
        font-size: 0.92rem;
        font-weight: 700;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-grow: 1;
        transition: color 0.25s ease;
      }

      .template-arrow {
        color: #cbd5e1;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        margin-left: 8px !important;
        transition:
          transform 0.3s ease,
          color 0.3s ease;
      }

      /* INTERACTIVE CARD ANIMATION */
      .business-card:hover {
        transform: translateY(-2px);
        border-color: #cbd5e1;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.03);
      }

      .business-card:hover .card-icon-frame {
        background-color: rgba(217, 119, 6, 0.1);
        color: #d97706;
      }

      .business-card:hover .card-title-text {
        color: #d97706;
      }

      .business-card:hover .template-arrow {
        color: #d97706;
        transform: translateX(3px);
      }

      /* INACTIVE CLASSIFICATION FILTER */
      .business-card.is-hidden {
        display: none !important;
      }
    

    
      /* ================= DECK CORE STYLING SYSTEM ================= */
      .hub-pill-accent {
        display: inline-block;
        background-color: rgba(217, 119, 6, 0.08);
        border: 1px solid rgba(217, 119, 6, 0.2);
        color: #b45309;
        padding: 4px 14px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-radius: 50px;
      }

      .hub-line-glow {
        width: 50px;
        height: 4px;
        background: linear-gradient(90deg, #d97706, transparent);
        border-radius: 20px;
      }

      /* FLEXIBLE AUTO-GRID ARCHITECTURE */
      .formats-feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 24px;
        margin-top: 20px;
      }

      /* DASHBOARD FRAME CARD ELEMENTS */
      .format-interactive-card {
        background: #ffffff;
        border: 1px solid #eef1f6;
        border-radius: 20px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.01);
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .format-card-body {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;
      }

      /* THEMED BRANDED ICON CONTAINERS */
      .format-icon-frame {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        flex-shrink: 0;
        margin-right: 18px !important; /* Strict internal visual buffer separating icon layout from text headers */
        transition: all 0.3s ease;
      }

      /* Specific Aesthetic Theme Profiles */
      .blue-theme {
        background-color: rgba(37, 99, 235, 0.08);
        color: #2563eb;
      }
      .purple-theme {
        background-color: rgba(147, 51, 234, 0.08);
        color: #9333ea;
      }
      .amber-theme {
        background-color: rgba(217, 119, 6, 0.08);
        color: #d97706;
      }
      .green-theme {
        background-color: rgba(22, 163, 74, 0.08);
        color: #16a34a;
      }
      .indigo-theme {
        background-color: rgba(79, 70, 229, 0.08);
        color: #4f46e5;
      }

      /* TYPOGRAPHY METRICS */
      .format-text-meta {
        display: flex;
        flex-direction: column;
      }

      .format-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 6px 0;
      }

      .format-description {
        font-size: 0.85rem;
        color: #64748b;
        line-height: 1.5;
        margin: 0;
      }

      /* BOTTOM INTERACTIVE DECK BAR */
      .format-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px dashed #f1f5f9;
        padding-top: 16px;
      }

      /* WORKFLOW CONTEXT ACCENT BADGES */
      .format-status-tag {
        font-size: 0.72rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
      }
      .tag-blue {
        background-color: rgba(37, 99, 235, 0.05);
        color: #2563eb;
      }
      .tag-purple {
        background-color: rgba(147, 51, 234, 0.05);
        color: #9333ea;
      }
      .tag-amber {
        background-color: rgba(217, 119, 6, 0.05);
        color: #d97706;
      }
      .tag-green {
        background-color: rgba(22, 163, 74, 0.05);
        color: #16a34a;
      }
      .tag-indigo {
        background-color: rgba(79, 70, 229, 0.05);
        color: #4f46e5;
      }

      /* HIGH INTENT LINK CALL TO ACTIONS */
      .format-action-btn {
        display: inline-flex;
        align-items: center;
        color: #0f172a !important;
        text-decoration: none !important;
        font-weight: 700;
        font-size: 0.84rem;
        transition: all 0.3s ease;
      }

      .format-action-btn i {
        margin-left: 6px !important; /* Forces strict spacing buffer for the link arrow */
        transition: transform 0.25s ease;
      }

      /* HOVER ANIMATION PROFILES */
      .format-interactive-card:hover {
        transform: translateY(-4px);
        border-color: #cbd5e1;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
      }

      .format-interactive-card:hover .format-action-btn {
        color: #d97706 !important;
      }

      .format-interactive-card:hover .format-action-btn i {
        transform: translateX(3px);
      }
    

    
      .premium-app-cta-section {
        position: relative;
        overflow: hidden;
      }

      /* THE PRESTIGE GLASS-WRAPPER OUTER DECK */
      .app-cta-glass-wrapper {
        background: #0f172a; /* Deep elegant corporate navy slate background */
        border-radius: 32px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
        overflow: hidden;
      }

      /* METADATA BADGE COMPONENTS */
      .cta-meta-badge {
        display: inline-flex;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #94a3b8;
        padding: 6px 14px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-radius: 50px;
      }

      /* Smooth live pulse node animation for visual engagement */
      .pulse-indicator {
        width: 6px;
        height: 6px;
        background-color: #22c55e;
        border-radius: 50%;
        margin-right: 8px !important; /* Forces strict visual gap away from text */
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
        animation: badge-pulse 2s infinite;
      }

      @keyframes badge-pulse {
        0% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
        }
        70% {
          transform: scale(1);
          box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
        }
        100% {
          transform: scale(0.95);
          box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
        }
      }

      .brand-gradient-text {
        background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .text-light-muted {
        color: #cbd5e1;
      }

      /* STRUCTURAL HORIZONTAL TRUST PROP SYSTEM */
      .cta-micro-props {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
      }

      .prop-item {
        font-size: 0.82rem;
        font-weight: 600;
        color: #94a3b8;
        display: flex;
        align-items: center;
      }

      .prop-item i {
        color: #fbbf24;
        font-size: 0.95rem;
        margin-right: 8px !important; /* Strict internal spacing buffer for micro icons */
      }

      /* RIGHT ASYMMETRIC BACKGROUND BLOCK */
      .card-action-anchor {
        background: linear-gradient(
          145deg,
          rgba(217, 119, 6, 0.15) 0%,
          rgba(15, 23, 42, 0) 100%
        );
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid rgba(255, 255, 255, 0.05);
      }

      @media (max-width: 991px) {
        .card-action-anchor {
          border-left: none;
          border-top: 1px dashed rgba(255, 255, 255, 0.1);
        }
      }

      /* HIGH-CONVERTING INTERIOR CALLOUT CARD */
      .conversion-offer-card {
        background: #ffffff;
        padding: 32px 28px;
        border-radius: 24px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        width: 100%;
      }

      .offer-badge {
        display: inline-block;
        background-color: rgba(217, 119, 6, 0.06);
        color: #b45309;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        padding: 3px 10px;
        border-radius: 6px;
        letter-spacing: 0.5px;
        margin-bottom: 12px;
      }

      /* MEGA CTA BUTTON METRICS */
      .hub-action-mega-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: #ffffff !important;
        font-weight: 700;
        font-size: 1rem;
        text-decoration: none !important;
        padding: 14px 24px;
        border-radius: 14px;
        box-shadow: 0 5px 15px rgba(217, 119, 6, 0.3);
        transition: all 0.3s ease;
      }

      .action-btn-arrow {
        font-size: 1.4rem;
        line-height: 1;
        margin-left: 6px !important; /* Hard-coded strict gap rule for the interaction arrow pointer */
        transition: transform 0.25s ease;
      }

      /* INTERACTIVE ACTION RESPONSES */
      .hub-action-mega-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(217, 119, 6, 0.4);
        background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
      }

      .hub-action-mega-btn:hover .action-btn-arrow {
        transform: translateX(4px);
      }