@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    /* -- BlueCloverr Sky Domain Design System -- */
    /* Concept: "Blue Sky" - Light Blue Backgrounds, Deep Blue Text, #3498DB Dominance */

    /* Core Brand Colors - MONOCHROMATIC DOMINANCE */
    --primary-color: #3498DB;
    /* THE HERO: Standard Blue */
    --primary-rgb: 52, 152, 219;

    --secondary-color: #2980B9;
    /* Deep Blue (formerly Teal) */
    --secondary-rgb: 41, 128, 185;

    --accent-color: #5DADE2;
    /* Sky Blue (formerly Lilac) */
    --accent-rgb: 93, 173, 226;

    --tertiary-color: #85C1E9;
    /* Soft Cloud Blue */
    --tertiary-rgb: 133, 193, 233;

    /* Backgrounds: LIGHT COLORED (Not White) */
    --bg-color: #EBF5FB;
    /* Light Blue Tint (Distinctly Blue, not White) */
    --surface-color: #ffffff;
    /* Pure White (Cards Pop against Blue BG) */
    --surface-hover: #D6EAF8;
    /* Deeper Blue Tint for Hover */
    --border-color: rgba(52, 152, 219, 0.2);
    /* Visible Blue Border */

    /* Brand Utility */
    --primary-glow: rgba(52, 152, 219, 0.25);
    --primary-dark: #1F618D;
    /* Navy for Active states */

    /* Text: Deep Blue High Contrast */
    --text-primary: #154360;
    /* Deepest Navy (Almost Black Blue) */
    --text-secondary: #21618C;
    /* Rich Blue-Gray */
    --text-muted: #5499C7;
    /* Muted Blue */

    /* Gradients: All Blue everything */
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --gradient-accent: linear-gradient(135deg, var(--accent-color), var(--tertiary-color));
    --gradient-glow: linear-gradient(135deg, var(--primary-color), #AED6F1);
    --gradient-dark: linear-gradient(to bottom, transparent, rgba(235, 245, 251, 0.95));

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.75);
    /* slightly less opacity to show blue bg */
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-highlight: rgba(255, 255, 255, 0.3);
    --blur-strength: 24px;

    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;

    /* Spacing & Layout */
    --section-gap: 8rem;
    --container-width: 1280px;
    --card-padding: 2.5rem;

    /* Shadows: Blue Tinted Shadows */
    --shadow-sm: 0 1px 3px rgba(21, 67, 96, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(21, 67, 96, 0.1), 0 2px 4px -1px rgba(21, 67, 96, 0.06);
    --shadow-lg: 0 20px 25px -5px rgba(21, 67, 96, 0.1), 0 8px 10px -6px rgba(21, 67, 96, 0.04);
    --shadow-premium: 0 25px 50px -12px rgba(52, 152, 219, 0.25);
}

/* Reset & Base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    scrollbar-color: var(--primary-color) var(--surface-hover);
    scrollbar-width: thin;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--surface-hover);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-secondary);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    /* More subtle / colorful for light mode */
    background-image:
        radial-gradient(circle at 15% 50%, rgba(var(--primary-rgb), 0.1) 0%, transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(var(--secondary-rgb), 0.08) 0%, transparent 40%);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(3rem, 5vw + 1rem, 5rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

h2 {
    font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
    font-weight: 700;
    margin-bottom: 3rem;
    text-align: center;
}

p {
    margin-bottom: 1.5rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

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

.text-gradient {
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: var(--surface-hover);
    color: var(--secondary-color);
    /* Deep Blue */
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 99px;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.badge:hover {
    background: rgba(var(--secondary-rgb), 0.1);
    transform: translateY(-1px);
}

/* Navbar - Floating Island */
.main-header {
    position: fixed;
    top: 0;
    /* Attach to top */
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0;
}

.nav-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    background: rgba(255, 255, 255, 0.85);
    /* White glass */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 0.75rem 2rem;
    /* Reduced vertical padding slightly */
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--font-heading);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo span {
    color: var(--primary-color);
}

/* Navigation Inner */
/* Navigation Inner */
.nav-links {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    height: 100%;
    position: relative;
    /* Context for SVG */
}

/* Common style for links and dropdown triggers */
.nav-links a:not(.nav-logo):not(.nav-cta),
.nav-item .dropdown-trigger {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s;
    margin: 0 0.25rem;
    /* Reduced margin */
    padding: 0.5rem 1rem;
    /* Added padding for pill shape */
    border-radius: 99px;
    /* Hint for shape */
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 2;
    /* Up z-index to sit on outline */
    text-decoration: none;
}

.nav-links a:not(.nav-logo):not(.nav-cta):hover,
.nav-item .dropdown-trigger:hover {
    color: white;
}

.nav-links a:not(.nav-logo):not(.nav-cta):hover {
    color: white;
}

/* Contact Button in Nav */
.nav-cta {
    background: var(--primary-color);
    color: white !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 99px;
    transition: all 0.3s ease;
    margin-left: auto;
    /* Push to right if logo isn't doing it */
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    background: var(--primary-dark);
}

/* The Line/Outline SVG */
.nav-outline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: visible;
}

.nav-outline rect {
    fill: transparent;
    stroke: var(--primary-color);
    stroke-width: 2;
    stroke-linecap: round;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    rx: 24px;
    /* Rounded corners for the pill shape */

    /* Dynamic Dash Array logic: 
       We will control stroke-dasharray and stroke-dashoffset via JS.
       Initial state: hidden or full outline? Let's hide initially.
    */
    stroke-dasharray: 0 1000;
    opacity: 0.8;
}

/* Nav Items */
.nav-item,
.nav-links>a {
    position: relative;
    z-index: 1;
    padding: 0.75rem 1.25rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s;
    border-radius: 99px;
    white-space: nowrap;
}

.nav-item:hover,
.nav-links>a:hover,
.nav-links>a.active {
    color: var(--primary-color);
}

/* Ensure Dropdowns still work */
.nav-item {
    height: auto;
    /* Reset fixed height if any */
    display: flex;
    align-items: center;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* Fix dropdown position relative to the item */
.dropdown-menu {
    top: 130%;
    /* Push it down a bit more due to pill shape */
}

/* Dropdown Styles */
.nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 0.75rem;
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    z-index: 1100;
}

.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(10px);
    /* Adjust for gap */
}

/* Bridge to prevent closing when moving mouse from link to menu */
.nav-item::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 20px;
}

.dropdown-menu a {
    white-space: nowrap;
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.2s;
    font-size: 0.9rem;
    text-align: left;
    background: transparent;
}

.dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--primary-color);
    transform: translateX(4px);
}

.dropdown-menu strong {
    color: var(--accent-color);
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: default;
}

.dropdown-trigger::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.6;
    margin-top: 2px;
}


/* Learn More Button Animation (Adapted from Uiverse.io) */
.learn-more {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    width: 12rem;
    height: auto;
    margin-top: 1rem;
}

.learn-more .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 3rem;
    height: 3rem;
    background: var(--primary-color);
    /* Adapted for theme */
    border-radius: 1.625rem;
}

.learn-more .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
}

.learn-more .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 0.625rem;
    width: 1.125rem;
    height: 0.125rem;
    background: none;
}

.learn-more .circle .icon.arrow::before {
    position: absolute;
    content: "";
    top: -0.29rem;
    right: 0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 0.125rem solid #fff;
    border-right: 0.125rem solid #fff;
    transform: rotate(45deg);
}

.learn-more .button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 0;
    margin: 0 0 0 1.85rem;
    color: #fff;
    /* Adapted for dark mode visibility */
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-transform: uppercase;
}

.learn-more:hover .circle {
    width: 100%;
}

.nav-links>a.nav-logo {
    padding: 0.5rem 1rem !important;
    /* Override generic link padding if needed */
    display: flex;
    align-items: center;
    opacity: 1;
}

.nav-links>a.nav-logo:hover {
    background: transparent;
}

/* Ensure generic link styles don't hide it or make it weird */
.nav-links>a.nav-logo img {
    display: block;
    max-width: none;
}

.learn-more:hover .circle .icon.arrow {
    background: #fff;
    transform: translate(1rem, 0);
}

/* 3D Flip Card Styles (Adapted for BlueCloverr Theme) */
/* 3D Flip Card Styles (Adapted for BlueCloverr Theme) */
.flip-card {
    overflow: visible;
    width: 100%;
    height: 220px;
    /* Reduced height from 320px */
    perspective: 1000px;
}

.flip-content {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    position: relative;
}

.flip-card:hover .flip-content {
    transform: rotateY(180deg);
    border: 1px solid var(--primary-color);
}

.flip-front,
.flip-back {
    background-color: var(--surface-color);
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

/* Front Side (Visible Initially) */
.flip-front {
    transform: rotateY(0deg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.flip-front::before {
    position: absolute;
    content: ' ';
    display: block;
    width: 160px;
    height: 160%;
    background: linear-gradient(90deg, transparent, var(--primary-color), var(--accent-color), var(--primary-color), transparent);
    animation: rotation_card 5000ms infinite linear;
}

.flip-front-content {
    position: absolute;
    width: 98%;
    height: 98%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    /* Gradient Blue-Teal */
    border-radius: 10px;
    color: white;
    /* White text */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    /* Reduced gap */
    z-index: 5;
    padding: 1rem;
    /* Reduced padding */
    text-align: center;
}

@keyframes rotation_card {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

.flip-front h3 {
    font-size: 1.25rem;
    color: white;
    margin: 0;
}

.flip-front svg,
.flip-front iconify-icon {
    font-size: 2.5rem;
    color: white;
}

/* Feature Card (Growth Marketing) */
.feature-card {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    color: white;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-card h3 {
    color: white;
    font-size: 1.5rem;
    margin: 0;
}

.feature-card p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.feature-card iconify-icon {
    font-size: 3rem;
    color: white;
    /* High contrast */
    margin-bottom: 0.5rem;
}

/* Back Side (Visible on Hover) */
.flip-back {
    transform: rotateY(180deg);
    color: white;
    /* White Text */
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    /* Reverse Gradient */
}

.flip-back-content {
    position: relative;
    width: 100%;
    height: 100%;
    /* Substantially increased bottom padding to prevent button from touching edge */
    padding: 1rem 1rem 2.5rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 10;
}

.flip-deco-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
}

.deco-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: var(--primary-color);
    position: absolute;
    filter: blur(40px);
    opacity: 0.4;
    animation: floating 2600ms infinite linear;
}

.deco-circle:nth-child(1) {
    top: -20px;
    left: -20px;
    background: var(--accent-color);
}

.deco-circle:nth-child(2) {
    bottom: -20px;
    right: -20px;
    background: var(--primary-color);
    animation-delay: -1s;
}

.description-box {
    background: var(--surface-hover);
    backdrop-filter: blur(5px);
    padding: 0.75rem;
    /* Reduced padding */
    border-radius: 8px;
    border: 1px solid var(--border-color);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0.5rem;
    /* Added minimal margin */
}

.description-box p {
    font-size: 0.85rem;
    /* Slightly smaller text */
    line-height: 1.4;
    color: var(--text-muted);
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* Added for compatibility */
    /* Limit text lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ensure Flip Card Text is White */
.flip-back h3,
.flip-back p,
.flip-back .description-box p {
    color: rgba(255, 255, 255, 0.95);
}

.flip-back .description-box {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.flip-back-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    /* Reduced margin */
}

.flip-badge {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-color);
    background: rgba(6, 182, 212, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

/* Override Learn More Margin inside text cards */
.flip-back-content .learn-more {
    margin-top: 0;
    transform: scale(0.7);
    /* Further reduced scale */
    transform-origin: left bottom;
    width: auto;
    /* Allow auto width to prevent layout issues */
}


.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    background: var(--primary-color);
    color: white;
    font-weight: 600;
    border-radius: 9999px;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px var(--primary-glow);
}

.btn-glass {
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 2rem;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 9999px;
}

/* ------------------------------------------------------------------
   2. Hero Section (New Tabbed Design)
   ------------------------------------------------------------------ */
.hero-tabbed-container {
    position: relative;
    min-height: 85vh;
    /* Taller hero */
    padding-top: 120px;
    /* Account for fixed navbar */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Light Blue Sky Background */
    background: radial-gradient(circle at center, var(--bg-color) 0%, var(--surface-hover) 100%);
}

.hero-content-display {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-bottom: 4rem;
    /* Space for tabs */
}

/* Content Wrapper for Transitions */
.content-wrapper {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
    transform: translateY(0);
}

.hero-content-display h1 {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    /* HIGH CONTRAST: Deep Navy instead of white gradient */
    color: var(--text-primary);
    /* #154360 - Deep Navy */
    background: none;
    -webkit-text-fill-color: initial;
    margin-bottom: 1.5rem;
}

.hero-content-display p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    /* #21618C - Rich Blue-Gray */
    max-width: 600px;
    margin: 0 auto 2rem auto;
    font-weight: 500;
}

.hero-bg-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    z-index: -1;
    pointer-events: none;
    mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
}

/* Tabs Navigation */
.hero-tabs-nav {
    display: flex;
    gap: 2rem;
    /* reduced from 4rem for better mobile fit */
    z-index: 10;
    margin-top: auto;
    margin-bottom: 3rem;
    width: 100%;
    max-width: 900px;
    justify-content: center;
    padding: 0 1rem;
}

.hero-tab {
    cursor: pointer;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    opacity: 0.5;
    transition: opacity 0.3s;
    position: relative;
    max-width: 200px;
}

.hero-tab:hover {
    opacity: 0.8;
}

.hero-tab.active {
    opacity: 1;
}

.tab-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    /* Deep Navy instead of white */
    text-align: left;
    padding-left: 2px;
}

.tab-progress {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color);
    border-radius: 2px;
}

@keyframes fillProgress {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

/* Mobile Tweaks */
@media (max-width: 768px) {
    .hero-tabs-nav {
        gap: 1rem;
        flex-wrap: wrap;
        /* Allow wrapping on very small screens */
    }

    .hero-content-display h1 {
        font-size: 2.5rem;
    }

    .hero-tab {
        flex: 1 1 40%;
        /* 2 per row on mobile */
    }
}

/* Glass Cards (Services & Sitemap) */
.sitemap-grid,
.features-grid {
    display: grid;
    /* Adjusted for 5 cards in a row. ~200px min width allows 5 on ~1200px screens if gap is small, or wrap. 
       Use repeat(auto-fit, minmax(200px, 1fr)) */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    /* Reduced gap slightly */
}

.category-card,
.feature-card {
    background: var(--surface-color);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: var(--card-padding);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.category-card::after,
.feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.category-card:hover,
.feature-card:hover {
    transform: translateY(-8px);
    background: var(--surface-hover);
    border-color: var(--primary-color);
    box-shadow: 0 20px 40px -20px rgba(59, 130, 246, 0.3);
}

.category-card h2,
.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.category-card ul li {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

.category-card ul li::before {
    content: '•';
    color: var(--accent-color);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* AI Section */
.ai-section {
    position: relative;
}

.ai-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 3rem;
    padding: 4rem;
}

.ai-visual img {
    border-radius: 2rem;
    box-shadow: 0 0 60px -15px rgba(6, 182, 212, 0.2);
}

/* Pro Max Sections */
/* Zig Zag */
.zig-zag-section {
    padding: var(--section-gap) 0;
}

.zig-zag-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.zig-zag-container.reverse .zig-zag-content {
    order: 2;
}

.zig-zag-visual img {
    border-radius: 24px;
    border: 1px solid var(--glass-border);
}

/* Accordion */
.accordion-section {
    background: linear-gradient(to bottom, var(--bg-color), #080c1e);
}

.accordion-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: flex-start;
}

.accordion-item {
    background: var(--surface-color);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

.accordion-item.active {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.05);
    /* Highlight active */
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.acc-icon {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.3s;
}

.accordion-item.active .acc-icon {
    transform: rotate(45deg);
    color: var(--primary-color);
}

.accordion-body {
    margin-top: 0;
    /* Animated via height/padding */
    padding-top: 0;
    border-top: none;
    color: var(--text-secondary);
    max-height: 0;
    opacity: 0;
    transition: all 0.4s ease;
}

.accordion-item.active .accordion-body {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
    max-height: 300px;
    /* Allow expansion */
    opacity: 1;
}

/* Remove hover effect override */
.accordion-item:hover .accordion-body {
    display: block;
    /* Remove this - let JS handle it */
    display: unset;
}

.accordion-item:hover .accordion-body {
    /* Resetting previous hover logic to avoid conflict */
    display: block;
    /* Actually, we want to remove the specific hover->block rule entirely from previous css */
}

/* Stats */
.stats-section {
    padding: 6rem 0;
    background: var(--surface-color);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

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

.stat-item h3 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Blog */
.blog-grid {
    gap: 2.5rem;
}

.blog-card {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    /* Gradient Blue-Teal */
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
    color: white;
}

.blog-card h3,
.blog-card p {
    color: white;
}

.blog-card:hover {
    transform: translateY(-10px);
}

.blog-img {
    height: 240px;
    background: #1e293b;
}

.blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-content {
    padding: 2rem;
}

.blog-tag {
    color: var(--accent-color);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: block;
}

/* Newsletter & Footer */
.newsletter-box {
    background: linear-gradient(135deg, var(--surface-hover), #dbeafe);
    /* Light Blue Gradient */
    border: 1px solid var(--border-color);
    border-radius: 32px;
    padding: 5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.newsletter-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

.newsletter-input {
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 1rem 1.5rem;
    border-radius: 9999px;
    width: 100%;
    font-size: 1rem;
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--primary-color);
}


/* Footer Layout */
footer {
    padding: 5rem 0 2rem;
    background: #f0fdfa;
    /* Light Teal Tint */
    border-top: 1px solid var(--border-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 0.8fr 0.8fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.footer-col h4 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.footer-col a {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--text-muted);
    transition: color 0.2s;
}

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

/* Newsletter Column */
.footer-newsletter p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.footer-form {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.footer-form input {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: inherit;
}

.footer-form input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.footer-disclaimer {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.footer-disclaimer a {
    display: inline;
    color: var(--text-primary);
    text-decoration: underline;
}

/* Social Links */
.social-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.social-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
}

.social-item iconify-icon {
    font-size: 1.25rem;
}

/* Footer Bottom Strip */
.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.copyright {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.legal-links {
    display: flex;
    gap: 2rem;
}

.legal-links a {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.legal-links a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* Client Logo Strip */
.client-strip {
    padding: 3rem 0;
    border-bottom: 1px solid var(--border-color);
    background: rgba(var(--primary-rgb), 0.05);
    /* Very light blue */
}

.logo-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem;
    opacity: 0.5;
}

.logo-container img {
    height: 32px;
    filter: grayscale(100%);
    /* Removed brightness increase for light mode */
    opacity: 0.7;
    transition: all 0.3s;
}

.logo-container img:hover {
    filter: none;
    opacity: 1;
}

/* Responsive Footer */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

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

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .legal-links {
        flex-direction: column;
        gap: 1rem;
    }
}


/* Responsive */
@media (max-width: 1024px) {
    h1 {
        font-size: 3rem;
    }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-text {
        margin: 0 auto;
    }

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

    .nav-links {
        display: none;
    }

    /* Mobile Menu would go here */
    .ai-container {
        grid-template-columns: 1fr;
        padding: 2rem;
    }

    .zig-zag-container {
        grid-template-columns: 1fr;
    }

    .accordion-container {
        grid-template-columns: 1fr;
    }

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

/* ------------------------------------------------------------------
   Social Follow UI (from Uiverse.io by Praashoo7)
   Adapted for BlueCloverr Footer
   ------------------------------------------------------------------ */

.social-main {
    display: flex;
    flex-wrap: wrap;
    width: 14em;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: relative;
    /* Fixed positioning */
}

/* Back Glow */
.main_back {
    position: absolute;
    border-radius: 10px;
    transform: rotate(90deg);
    width: 11em;
    height: 11em;
    background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);
    z-index: -2;
    box-shadow: inset 0px 0px 180px 5px #ffffff;
    opacity: 0;
    /* Hidden by default in this adaptation if desired, or keep logic */
    transition: opacity 0.4s;
}

/* Card Tiles */
.social-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-top-left-radius: 10px;
    background: var(--surface-hover);
    transition: 0.4s ease-in-out, 0.2s background-color ease-in-out, 0.2s background-image ease-in-out;
    /* Adjusted opacity for footer */
    backdrop-filter: blur(5px);
    border: 1px solid var(--border-color);
    -webkit-backdrop-filter: blur(5px);
    cursor: pointer;
}

.social-card svg {
    width: 30px;
    height: 30px;
}

/* Instagram */
.social-card .instagram {
    opacity: 0;
    transition: 0.2s ease-in-out;
    fill: #cc39a4;
}

.social-card:nth-child(1):hover {
    background-color: #cc39a4;
}

.social-card:nth-child(1):hover .instagram {
    fill: white;
    opacity: 1;
}

/* Twitter / X */
.social-card:nth-child(2) {
    border-radius: 0px;
}

.social-card .twitter {
    opacity: 0;
    transition: 0.2s ease-in-out;
    fill: #03a9f4;
}

.social-card:nth-child(2):hover {
    background-color: #03a9f4;
}

.social-card:nth-child(2):hover .twitter {
    fill: white;
    opacity: 1;
}

/* Dribbble */
.social-card:nth-child(3) {
    border-top-right-radius: 10px;
    border-top-left-radius: 0px;
}

.social-card .dribble {
    opacity: 0;
    transition: 0.2s ease-in-out;
    fill: #ffb5d2;
}

.social-card:nth-child(3):hover {
    background-color: #ffb5d2;
}

.social-card:nth-child(3):hover .dribble {
    fill: white;
    opacity: 1;
}

/* CodePen */
.social-card:nth-child(4) {
    border-radius: 0px;
}

.social-card .codepen {
    opacity: 0;
    transition: 0.2s ease-in-out;
    fill: white;
}

.social-card:nth-child(4):hover {
    background-color: #1e1f26;
}

.social-card:nth-child(4):hover .codepen {
    fill: white;
    opacity: 1;
}

/* Uiverse / Center */
.social-card:nth-child(5) {
    border-radius: 0px;
}

.social-card .uiverse {
    position: absolute;
    margin-left: 0.2em;
    margin-top: 0.2em;
    opacity: 0;
    transition: 0.2s ease-in-out;
}

.social-card:nth-child(5):hover {
    animation: backgroundIMG 0.1s;
    animation-fill-mode: forwards;
}

.social-card:nth-child(5):hover .uiverse {
    opacity: 1;
}

.social-card:nth-child(5):hover .uiverse #paint0_linear_501_142 stop,
.social-card:nth-child(5):hover .uiverse #paint1_linear_501_142 stop,
.social-card:nth-child(5):hover .uiverse #paint2_linear_501_142 stop {
    stop-color: white;
}

@keyframes backgroundIMG {
    100% {
        background-image: linear-gradient(#bf66ff, #6248ff, #00ddeb);
    }
}

/* Discord */
.social-card:nth-child(6) {
    border-radius: 0px;
}

.social-card .discord {
    opacity: 0;
    transition: 0.2s ease-in-out;
    fill: var(--accent-color);
}

.social-card:nth-child(6):hover {
    background-color: var(--accent-color);
}

.social-card:nth-child(6):hover .discord {
    fill: white;
    opacity: 1;
}

/* GitHub */
.social-card:nth-child(7) {
    border-bottom-left-radius: 10px;
    border-top-left-radius: 0px;
}

.social-card .github {
    opacity: 0;
    transition: 0.2s ease-in-out;
    fill: white;
}

.social-card:nth-child(7):hover {
    background-color: black;
}

.social-card:nth-child(7):hover .github {
    fill: white;
    opacity: 1;
}

/* Telegram */
.social-card:nth-child(8) {
    border-radius: 0px;
}

.social-card .telegram {
    opacity: 0;
    transition: 0.2s ease-in-out;
    fill: var(--primary-color);
}

.social-card:nth-child(8):hover {
    background-color: var(--primary-color);
}

.social-card:nth-child(8):hover .telegram>path:nth-of-type(1) {
    fill: white;
}

.social-card:nth-child(8):hover .telegram>path:nth-of-type(2) {
    fill: var(--primary-color);
}

.social-card:nth-child(8):hover .telegram>path:nth-of-type(3) {
    fill: var(--primary-color);
}

/* Reddit */
.social-card:nth-child(9) {
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0px;
}

.social-card .reddit {
    opacity: 0;
    transition: 0.2s ease-in-out;
}

.social-card:nth-child(9):hover {
    background-color: rgb(255, 69, 0);
}

.social-card:nth-child(9):hover .reddit>g circle {
    fill: rgb(255, 69, 0);
}

.social-card:nth-child(9) .reddit>g path {
    fill: white;
}

.social-card:nth-child(9):hover .reddit>g path {
    fill: white;
}


/* Main Container Hover Effects - Triggered ONLY when hovering the container */
.social-main:hover .main_back {
    opacity: 0;
}

.social-main:hover .social-text {
    opacity: 0;
    z-index: -3;
}

/* Reveal Icons on Main Hover */
.social-main:hover .instagram,
.social-main:hover .twitter,
.social-main:hover .dribble,
.social-main:hover .codepen,
.social-main:hover .uiverse,
.social-main:hover .discord,
.social-main:hover .github,
.social-main:hover .telegram,
.social-main:hover .reddit {
    opacity: 1;
}

/* Separate Cards when Hovering Main */
.social-main:hover .social-card {
    margin: 0.2em;
    border-radius: 10px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.2);
}

.social-main:hover .social-card:nth-child(5) {
    border: transparent;
}


/* Center Text */
.social-text {
    position: absolute;
    font-size: 0.7em;
    transition: 0.4s ease-in-out;
    color: var(--text-primary);
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.33em;
    z-index: 3;
    pointer-events: none;
    /* Let clicks pass through */
}

/* ------------------------------------------------------------------
   Service Pages Hero (Scattered Design)
   ------------------------------------------------------------------ */
.hero-scattered-container {
    position: relative;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 80px;
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(165, 180, 252, 0.05) 0%, transparent 60%);
}

.hero-center-text {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 700px;
    padding: 0 1rem;
}

.hero-center-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, var(--accent-color) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-center-text p {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.hero-floating-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.float-card {
    position: absolute;
    width: 200px;
    height: 120px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Gradient Card Style */
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    backdrop-filter: blur(8px);
    overflow: hidden;
    opacity: 0.9;
    /* Increased opacity for visibility */
    transition: all 0.5s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.float-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

/* Positions */
@keyframes float-modern {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -20px;
    }
}

/* Positions - Refactored for independent transform properties */
.float-card.pos-1 {
    top: 15%;
    left: 5%;
    rotate: -5deg;
    animation: float-modern 8s ease-in-out infinite;
}

.float-card.pos-2 {
    top: 45%;
    left: -2%;
    rotate: 3deg;
    animation: float-modern 7s ease-in-out infinite 1s;
}

.float-card.pos-3 {
    bottom: 15%;
    left: 8%;
    rotate: -2deg;
    animation: float-modern 9s ease-in-out infinite 2s;
}

.float-card.pos-4 {
    top: 18%;
    right: 6%;
    rotate: 4deg;
    animation: float-modern 8s ease-in-out infinite 0.5s;
}

.float-card.pos-5 {
    top: 50%;
    right: -2%;
    rotate: -3deg;
    animation: float-modern 7s ease-in-out infinite 1.5s;
}

.float-card.pos-6 {
    bottom: 12%;
    right: 8%;
    rotate: 5deg;
    animation: float-modern 9s ease-in-out infinite 2.5s;
}

/* Mobile: Hide floating cards to keep clean */
@media (max-width: 1024px) {
    .float-card {
        opacity: 0.15;
        transform: scale(0.8);
    }

    .float-card.pos-2,
    .float-card.pos-5 {
        display: none;
    }
}

/* ------------------------------------------------------------------
   4. Expertise Section (4+1 Interactive Layout)
   ------------------------------------------------------------------ */
.expertise-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2rem;
    align-items: stretch;
}

/* Left: 2x2 Grid */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Small Card */
.expert-card-small {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    /* Gradient Blue-Teal */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 220px;
    color: white;
    /* White text contrast */
}

.expert-card-small:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
    border-color: var(--primary-color);
}

.small-card-header {
    margin-bottom: 1rem;
}

.card-icon-sm {
    font-size: 1.5rem;
    color: white;
    /* Updated for gradient background */
    margin-bottom: 0.75rem;
    display: block;
}

.expert-card-small h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.expert-card-small p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    /* White text contrast */
    line-height: 1.5;
    flex-grow: 1;
    /* Pushes button down */
}

.small-card-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.expert-card-small:hover .action-btn {
    background: var(--primary-color);
    color: white;
}

/* Right: Large Detail Card */
.expertise-detail {
    display: flex;
}

.expert-card-large {
    width: 100%;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    /* Reverse gradient for variety */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    color: white;
}

.card-visual {
    height: 250px;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 1), transparent);
}

.card-content {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.card-icon-lg {
    font-size: 2rem;
    color: var(--accent-color);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.75rem;
    border-radius: 12px;
}

.expert-card-large h3 {
    font-size: 2rem;
    margin: 0;
    font-weight: 700;
}

.expert-card-large p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    /* White Text */
    margin-bottom: 2rem;
    line-height: 1.7;
}

/* Animation */
.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

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

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

/* Responsive */
@media (max-width: 900px) {
    .expertise-container {
        grid-template-columns: 1fr;
    }

    .expertise-grid {
        order: 2;
        /* Move grid to bottom on mobile */
    }

    .expertise-detail {
        order: 1;
        margin-bottom: 2rem;
    }
}

/* ------------------------------------------------------------------
   Contact 23 Style Grid
   ------------------------------------------------------------------ */
.contact-grid-section {
    padding: 6rem 0;
    text-align: center;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    border-radius: 12px;
}

.contact-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.contact-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.contact-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 280px;
}

.contact-link {
    color: var(--text-primary);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    transition: color 0.3s;
}

.contact-link:hover {
    color: var(--primary-color);
}

@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

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


/* ------------------------------------------------------------------
   Interactive Split FAQ (Master-Detail)
   ------------------------------------------------------------------ */
.faq-split-section {
    position: relative;
    background: var(--bg-color);
    /* Light Blue Tint */
}

/* Grid Layout */
.faq-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4rem;
    align-items: start;
    min-height: 500px;
}

/* Left Panel - Sticky Display Area */
.faq-left-panel {
    position: sticky;
    top: 120px;
    /* Below Navbar */
    padding: 2rem;
    background: transparent;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Initially centered */
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    min-height: 300px;
}

/* Title Container */
.faq-header-container {
    transition: all 0.5s ease;
    transform-origin: left top;
}

.faq-header-container h2 {
    font-size: 3.5rem;
    text-align: left;
    margin-bottom: 1rem;
    color: var(--text-primary);
    transition: all 0.5s ease;
}

.faq-header-container p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 400px;
    transition: all 0.3s ease;
}

/* Active State (When a question is clicked) */
.faq-left-panel.active-view {
    justify-content: flex-start;
    /* Move to top */
}

.faq-left-panel.active-view .faq-header-container {
    transform: translateY(-20px) scale(0.9);
    /* Move Up and Scale Down slightly */
    margin-bottom: 2rem;
}

.faq-left-panel.active-view .faq-header-container p {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
    /* Hide subtitle to make room */
}

/* Dynamic Answer Display Area */
.faq-dynamic-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease 0.1s;
    /* Slight delay */
    pointer-events: none;
}

.faq-left-panel.active-view .faq-dynamic-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.faq-dynamic-content h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.faq-dynamic-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* Right Panel - Interactive List */
.faq-right-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item-interactive {
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 1.5rem 2rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-item-interactive:hover {
    border-color: var(--primary-color);
    transform: translateX(10px);
    background: var(--surface-hover);
}

.faq-item-interactive.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 10px 25px -5px rgba(var(--primary-rgb), 0.4);
}

.faq-item-interactive h3 {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 600;
    color: inherit;
    /* Inherit form parent */
}

.faq-item-interactive .faq-icon {
    font-size: 1.5rem;
    transition: transform 0.3s;
}

.faq-item-interactive.active .faq-icon {
    transform: rotate(90deg);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .faq-left-panel {
        position: relative;
        top: 0;
        min-height: auto;
        padding: 0;
        margin-bottom: 2rem;
        text-align: center;
        align-items: center;
    }

    .faq-header-container h2 {
        text-align: center;
    }

    .faq-left-panel.active-view .faq-header-container {
        transform: none;
        /* Disable complex move on mobile */
    }
}

/* ------------------------------------------------------------------
   UI/UX PRO MAX - Premium Components
   (Appended for Uniformity & High Contrast)
   ------------------------------------------------------------------ */

/* 1. Fluid Grids & Layouts */
.pro-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.fluid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 3rem;
    align-items: stretch;
}

/* 2. Premium Buttons (Uniform Styles) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    border-radius: 99px;
    /* Pill Shape */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    letter-spacing: 0.02em;
    position: relative;
    overflow: hidden;
}

/* Primary: Main Call to Action */
.btn-primary {
    background: var(--primary-color);
    color: #ffffff;
    /* High Contrast White */
    border: 2px solid var(--primary-color);
    box-shadow: 0 10px 20px -5px rgba(var(--primary-rgb), 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgba(var(--primary-rgb), 0.5);
    background: var(--primary-dark);
    /* Slightly darker on hover */
    border-color: var(--primary-dark);
}

/* Secondary: Alternative Action */
.btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -5px rgba(var(--primary-rgb), 0.2);
}

/* 3. Premium Cards (Subtle & High Visibility) */
.premium-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2.5rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    /* For Grid uniformity */
    display: flex;
    flex-direction: column;
}

.premium-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-premium);
    border-color: rgba(var(--primary-rgb), 0.2);
}

/* 4. Conversion CTA Section path */
.conversion-section {
    background: linear-gradient(135deg, var(--bg-color) 0%, var(--surface-hover) 100%);
    padding: var(--section-gap) 0;
    text-align: center;
    position: relative;
}

.conversion-content h2 {
    font-size: 3rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.conversion-content p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 3rem auto;
}

/* ------------------------------------------------------------------
   HERO SECTION CONTRAST FIX - Global Styles
   Applied to all hero sections across the website
   ------------------------------------------------------------------ */

/* Standard Hero (About, Contact, etc.) */
.hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: 8rem 0 4rem 0;
    background: var(--bg-color);
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text-primary);
    /* #154360 - Deep Navy */
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.hero-text p {
    font-size: 1.15rem;
    color: var(--text-secondary);
    /* #21618C - Rich Blue-Gray */
    line-height: 1.7;
    font-weight: 500;
}

.hero-visual {
    position: relative;
}

.hero-visual img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-text h1 {
        font-size: 2.5rem;
    }
}

/* =========================================
   CONSOLIDATED MODULES
   ========================================= */

/* ------------------------------------------------------------------
   Service Pages Hero (Scattered Design)
   ------------------------------------------------------------------ */
.hero-scattered-container {
    position: relative;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 80px;
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(165, 180, 252, 0.05) 0%, transparent 60%);
}

.hero-center-text {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 700px;
    padding: 0 1rem;
}

.hero-center-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: initial;
}

.hero-center-text p {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-weight: 500;
}

.hero-floating-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.float-card {
    position: absolute;
    width: 200px;
    height: 120px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    overflow: hidden;
    opacity: 0.6;
    transition: all 0.5s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.float-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.float-card.pos-1 {
    top: 15%;
    left: 5%;
    transform: rotate(-5deg);
    animation: float 8s ease-in-out infinite;
}

.float-card.pos-2 {
    top: 45%;
    left: -2%;
    transform: rotate(3deg);
    animation: float 7s ease-in-out infinite 1s;
}

.float-card.pos-3 {
    bottom: 15%;
    left: 8%;
    transform: rotate(-2deg);
    animation: float 9s ease-in-out infinite 2s;
}

.float-card.pos-4 {
    top: 18%;
    right: 6%;
    transform: rotate(4deg);
    animation: float 8s ease-in-out infinite 0.5s;
}

.float-card.pos-5 {
    top: 50%;
    right: -2%;
    transform: rotate(-3deg);
    animation: float 7s ease-in-out infinite 1.5s;
}

.float-card.pos-6 {
    bottom: 12%;
    right: 8%;
    transform: rotate(5deg);
    animation: float 9s ease-in-out infinite 2.5s;
}

@media (max-width: 1024px) {
    .float-card {
        opacity: 0.15;
        transform: scale(0.8);
    }

    .float-card.pos-2,
    .float-card.pos-5 {
        display: none;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(var(--rotate, 0deg));
    }

    50% {
        transform: translateY(-20px) rotate(var(--rotate, 0deg));
    }
}

/* Navbar and Hero Section Spacing Fix */
body {
    padding-top: 0 !important;
}

.hero-tabbed-container {
    padding-top: 100px !important;
    margin-top: 0 !important;
}

.hero-scattered-container {
    padding-top: 100px !important;
    margin-top: 0 !important;
}

.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {

    .hero-tabbed-container,
    .hero-scattered-container {
        padding-top: 80px !important;
    }
}

/* Pixel & Code Studio Section */
.pixel-code-studio-section {
    background: var(--bg-color);
    padding: 4rem 0;
}

.pixel-code-studio-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.pixel-code-studio-section .section-header .badge {
    background: var(--surface-hover);
    padding: 0.5rem 1rem;
    border-radius: 99px;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pixel-code-studio-section h2 {
    font-size: 2.5rem;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.pixel-code-studio-section .section-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.studio-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.studio-card {
    position: relative;
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-md);
}

.studio-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-premium);
}

.studio-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    transition: transform 0.4s ease;
}

.studio-card:hover .studio-card-image {
    transform: scale(1.05);
}

.studio-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.studio-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(21, 67, 96, 0.7) 0%, rgba(21, 67, 96, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    transition: background 0.4s ease;
}

.studio-card:hover .studio-card-overlay {
    background: linear-gradient(to bottom, rgba(21, 67, 96, 0.5) 0%, rgba(21, 67, 96, 0.85) 100%);
}

.studio-card-tagline {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.studio-card h3 {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    font-weight: 700;
}

.studio-card-description {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.studio-card:hover .studio-card-description {
    opacity: 1;
    transform: translateY(0);
}

.studio-card-icon {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
}

.studio-card:hover .studio-card-icon {
    color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1) rotate(5deg);
}

.studio-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.4s ease;
}

.studio-card:hover .studio-card-link {
    opacity: 1;
    transform: translateX(0);
}

.studio-card-link iconify-icon {
    transition: transform 0.3s ease;
}

.studio-card:hover .studio-card-link iconify-icon {
    transform: translateX(5px);
}

@media (max-width: 968px) {
    .studio-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .studio-card {
        height: 350px;
    }
}

@media (max-width: 640px) {
    .studio-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .studio-card {
        height: 320px;
    }

    .pixel-code-studio-section h2 {
        font-size: 2rem;
    }
}

/* App & Software Section */
.app-software-section {
    padding: 4rem 0;
    background: var(--bg-color);
    overflow: hidden;
}

.app-software-container {
    display: flex;
    width: 100%;
    height: 600px;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: 2px;
    overflow: hidden;
}

.app-software-tab {
    position: relative;
    height: 100%;
    border-left: 1px solid var(--border-color);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
    cursor: pointer;
    background: white;
}

.app-software-tab.active {
    flex: 5;
    cursor: default;
    background: white;
    padding: 3rem;
    display: flex;
    flex-direction: column;
}

.app-software-tab.active:first-child {
    border-left: none;
}

.app-software-tab:not(.active) {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 1rem;
}

.app-software-tab:not(.active):hover {
    background: var(--surface-hover);
}

.tab-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.active .tab-number {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
}

.vertical-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.active .vertical-label {
    position: absolute;
    bottom: 3rem;
    left: 3rem;
    margin: 0;
}

.tab-content {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.4s ease 0.2s;
    display: none;
    width: 100%;
    height: 100%;
    padding-left: 3rem;
}

.active .tab-content {
    opacity: 1;
    transform: translateX(0);
    display: block;
    display: flex;
    flex-direction: column;
}

.tab-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    max-width: 600px;
}

.tab-content p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 600px;
}

.tab-image-container {
    flex: 1;
    width: 100%;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    max-height: 350px;
}

.tab-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.active:hover .tab-image {
    transform: scale(1.03);
}

@media (max-width: 968px) {
    .app-software-container {
        flex-direction: column;
        height: auto;
        min-height: 800px;
    }

    .app-software-tab {
        border-left: none;
        border-top: 1px solid var(--border-color);
        width: 100%;
    }

    .app-software-tab.active {
        flex: auto;
        padding: 2rem;
    }

    .app-software-tab:not(.active) {
        flex: none;
        height: 80px;
        flex-direction: row;
        padding: 0 2rem;
        justify-content: flex-start;
        gap: 2rem;
    }

    .vertical-label {
        writing-mode: horizontal-tb;
        transform: none;
    }

    .active .vertical-label {
        display: none;
    }

    .tab-content {
        padding-left: 0;
    }

    .active .tab-content {
        padding-top: 1rem;
    }
}

/* About Us Section */
.about-us-section {
    padding: 6rem 0;
    background: white;
}

.about-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
}

.about-tagline {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 1rem;
}

.about-header h2 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.about-header p {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.about-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.btn-solid {
    background: var(--text-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid var(--text-primary);
}

.btn-solid:hover {
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-outline-arrow {
    background: transparent;
    color: var(--text-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.btn-outline-arrow iconify-icon {
    transition: transform 0.3s ease;
}

.btn-outline-arrow:hover {
    border-color: var(--text-primary);
    background: var(--surface-hover);
}

.btn-outline-arrow:hover iconify-icon {
    transform: translateX(4px);
}

.about-content-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-image {
    width: 100%;
    aspect-ratio: 1/1;
    background: #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-info-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about-info-item {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

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

.about-info-item.active h3 {
    color: var(--text-primary);
    font-weight: 700;
}

.about-info-item.active p {
    display: block;
    opacity: 1;
    max-height: 200px;
    margin-top: 1rem;
}

.about-info-item:not(.active) h3 {
    color: var(--text-secondary);
    opacity: 0.6;
    font-weight: 600;
}

.about-info-item:not(.active):hover h3 {
    opacity: 1;
    color: var(--primary-color);
}

.about-info-item:not(.active) p {
    display: none;
    opacity: 0;
}

.about-info-item h3 {
    font-size: 1.5rem;
    margin: 0;
    transition: all 0.3s ease;
}

.about-info-item p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.6;
    transition: all 0.4s ease;
}

@media (max-width: 968px) {
    .about-content-split {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-image {
        aspect-ratio: 16/9;
    }

    .about-header h2 {
        font-size: 2.5rem;
    }
}

/* Growth Marketing Section */
.growth-marketing-section {
    padding: 6rem 0;
    background: white;
}

.growth-content-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}

.growth-left-col {
    display: flex;
    flex-direction: column;
}

.growth-tagline {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    display: block;
}

.growth-left-col h2 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.growth-intro-text {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 3rem;
}

.growth-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 3rem;
    border-top: 1px solid var(--border-color);
}

.growth-accordion-item {
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.growth-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.growth-accordion-header h3 {
    font-size: 1.25rem;
    margin: 0;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.growth-accordion-item.active .growth-accordion-header h3 {
    color: var(--text-primary);
    font-weight: 700;
}

.growth-accordion-desc {
    display: none;
    /* Hidden, moved to image overlay */
}

/* Image Overlay Styles */
.growth-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.6) 80%, transparent);
    padding: 3rem 2rem 2rem;
    z-index: 10;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    pointer-events: none;
    /* Let clicks pass through if needed */
}

.growth-image-overlay.active {
    opacity: 1;
    transform: translateY(0);
}

.growth-image-overlay p {
    color: white;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    max-width: 90%;
}

.growth-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.growth-visual-col {
    position: sticky;
    top: 100px;
}

.growth-image-container {
    width: 100%;
    aspect-ratio: 1/1;
    background: #f8f9fa;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.growth-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease, transform 0.8s ease;
}

.growth-image.fade-out {
    opacity: 0;
    transform: scale(1.05);
}

@media (max-width: 968px) {
    .growth-content-split {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .growth-visual-col {
        position: static;
        order: -1;
    }

    .growth-image-container {
        aspect-ratio: 16/9;
    }

    .growth-left-col h2 {
        font-size: 2.5rem;
    }
}

/* Intelligent Systems Optimization */
.intelligent-systems-section {
    padding: 6rem 0;
    background: var(--surface-color);
}

.intelligent-content-split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

.intelligent-left-col {
    display: flex;
    flex-direction: column;
}

.intelligent-tagline {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    display: block;
}

.intelligent-left-col h2 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.intelligent-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.intelligent-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 4rem;
}

.intelligent-features-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    padding-left: 20px;
    border-left: 2px solid var(--border-color);
}

.feature-item {
    position: relative;
    padding: 1rem 0 1rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.5;
}

.feature-item.active {
    opacity: 1;
}

.feature-item::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary-color);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.feature-item.active::before {
    transform: scaleY(1);
}

.feature-number {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
    display: block;
}

.feature-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.feature-desc {
    display: none;
    /* Hidden, moved to image overlay */
}

/* Centered Image Overlay */
.intelligent-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(15, 23, 42, 0.4);
    /* Slight overall tint */
    z-index: 10;
    opacity: 0;
    transition: all 0.5s ease;
    padding: 2rem;
    pointer-events: none;
}

.intelligent-image-overlay.active {
    opacity: 1;
}

.intelligent-image-overlay p {
    color: white;
    font-size: 1.5rem;
    /* Larger for center stage */
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    max-width: 80%;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

    /* Glass card effect for the text box itself */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.5s ease;
}

.intelligent-image-overlay.active p {
    transform: translateY(0);
}

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

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

.intelligent-visual-col {
    position: relative;
    height: 600px;
}

.intelligent-image-container {
    width: 100%;
    height: 100%;
    background: #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-lg);
}

.intelligent-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
}

@media (max-width: 968px) {
    .intelligent-content-split {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .intelligent-visual-col {
        height: 400px;
        order: -1;
    }
}

/* Immersive CTA */
.immersive-cta-section {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #0f172a;
    overflow: hidden;
    padding: 4rem 1rem;
}

.immersive-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.immersive-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    transition: transform 10s ease;
}

.immersive-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.9));
}

.immersive-cta-section:hover .immersive-background img {
    transform: scale(1.05);
}

.immersive-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    color: white;
}

.immersive-tagline {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1.5rem;
    border-radius: 99px;
    backdrop-filter: blur(4px);
    animation: fadeInDown 1s ease forwards;
}

.immersive-heading {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    animation: fadeInUp 1s ease 0.3s forwards;
}

.immersive-description {
    font-size: 1.35rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 700px;
    margin: 0 auto 3.5rem;
    opacity: 0;
    font-weight: 300;
    animation: fadeInUp 1s ease 0.6s forwards;
}

.immersive-actions {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    opacity: 0;
    animation: fadeInUp 1s ease 0.9s forwards;
}

.btn-immersive-solid {
    background: white;
    color: #0f172a;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.btn-immersive-solid:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
    background: #f8fafc;
}

.btn-immersive-outline {
    background: transparent;
    color: white;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

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

.btn-immersive-outline iconify-icon {
    transition: transform 0.3s ease;
}

.btn-immersive-outline:hover iconify-icon {
    transform: translateX(5px);
}

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

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@media (max-width: 968px) {
    .immersive-heading {
        font-size: 3.5rem;
    }

    .immersive-cta-section {
        min-height: 70vh;
    }
}

@media (max-width: 640px) {
    .immersive-heading {
        font-size: 2.5rem;
    }

    .immersive-description {
        font-size: 1.15rem;
    }

    .immersive-actions {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }

    .btn-immersive-solid,
    .btn-immersive-outline {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================
   UTILITY CLASSES (Inline Styles Replacements)
   ========================================= */
.nav-logo-style {
    margin-right: auto;
    padding: 0.5rem 1rem;
}

.logo-img-style {
    height: 32px;
    width: auto;
}

.text-white-force {
    color: white !important;
}

.flex-gap-1 {
    display: flex;
    gap: 1rem;
}

.mt-1 {
    margin-top: 1rem;
}

.badge-pill {
    background: var(--surface-hover);
    padding: 0.5rem 1rem;
    border-radius: 99px;
    font-weight: 600;
    color: var(--primary-color);
}

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

.mb-5 {
    margin-bottom: 3rem;
}

.bg-surface {
    background: var(--surface-color);
}

.bg-bg-color {
    background: var(--bg-color);
}

.stat-item-inner {
    text-align: center;
}

.stat-number-primary {
    font-size: 3rem;
    color: var(--primary-color);
}

.stat-number-secondary {
    font-size: 3rem;
    color: var(--secondary-color);
}

.stat-number-accent {
    font-size: 3rem;
    color: var(--accent-color);
}

.project-image-container {
    height: 250px;
    position: relative;
    overflow: hidden;
}

.project-img-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.project-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: white;
    opacity: 0.5;
}

.project-card-content {
    padding: 1.5rem;
}

.project-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.project-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.project-tags-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.tag-pill {
    background: var(--surface-hover);
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 600;
}

.tag-primary {
    color: var(--primary-color);
}

.tag-secondary {
    color: var(--secondary-color);
}

.tag-accent {
    color: var(--accent-color);
}

.link-arrow-primary {
    color: var(--primary-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.grad-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.grad-accent {
    background: linear-gradient(135deg, var(--accent-color), var(--tertiary-color));
}

.grad-secondary {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
}

.grad-primary-accent {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
}

.grad-tertiary {
    background: linear-gradient(135deg, var(--tertiary-color), var(--primary-color));
}

.blog-tag-technology {
    color: var(--primary-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.blog-tag-design {
    color: var(--secondary-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.blog-link-read {
    font-weight: 600;
}

.pt-150 {
    padding-top: 150px;
}

.mb-1 {
    margin-bottom: 1rem;
}

.btn-glass-subscribe {
    padding: 0.75rem 1.5rem;
}



.mb-1 {
    margin-bottom: 1rem;
}

.bg-glass-light {
    background: rgba(255, 255, 255, 0.02);
}

.text-center-mb-4 {
    text-align: center;
    margin-bottom: 4rem;
}

.card-desc-sm {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 0;
}

.pill-glass-light {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
}

.carousel-card {
    min-width: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
}

.carousel-img-frame {
    height: 200px;
    background: #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-content {
    padding: 1.5rem;
}

.tech-list-ul {
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

.tech-header {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.card-feature-p {
    margin-bottom: 1rem;
}

.feature-list-check {
    font-size: 0.9rem;
    opacity: 0.8;
    padding-left: 1rem;
}

.post-launch-p {
    margin-bottom: 1rem;
}

.post-launch-header {
    margin-bottom: 1.5rem;
}

.post-launch-ul {
    font-size: 0.9rem;
    opacity: 0.8;
    line-height: 1.8;
}

.flip-card p {
    margin-bottom: 0;
}

/* Reset margin for flip card paragraphs if needed */

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

.mb-5 {
    margin-bottom: 3rem;
}

.bg-surface {
    background: var(--surface-color);
}

.icon-lg-primary {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.grid-col-full {
    grid-column: 1 / -1;
}

.grid-cols-2 {
    grid-template-columns: 1fr 1fr;
}

.team-avatar {
    width: 80px;
    height: 80px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 auto 1rem;
}

/* =========================================
   Layout 412: Wide Banner / Immersive Section
   ========================================= */
.layout-412-section {
    position: relative;
    width: 100%;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
    text-align: center;
    background-color: #0f172a;
}

.layout-412-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.layout-412-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: transform 10s ease, opacity 0.5s ease;
    transform: scale(1.0);
}

.layout-412-section:hover .layout-412-bg img {
    transform: scale(1.05);
    /* Slow zoom on hover */
    opacity: 0.5;
}

.layout-412-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.7) 40%, rgba(15, 23, 42, 0.9) 100%);
    z-index: 2;
    backdrop-filter: blur(2px);
}

.layout-412-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
    padding: 0 1.5rem;
}

.layout-412-tagline {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    color: var(--accent-color);
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1.5rem;
    border-radius: 99px;
    backdrop-filter: blur(4px);
}

.layout-412-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    color: white;
}

.layout-412-desc {
    font-size: 1.25rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.layout-412-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

@media (max-width: 768px) {
    .layout-412-title {
        font-size: 2.5rem;
    }
}

/* =========================================
   Interactive Split Layout (Overlay Text)
   ========================================= */
.layout-interactive-section {
    padding: 6rem 0;
    background: var(--bg-color, white);
}

.layout-interactive-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.layout-interactive-content {
    display: flex;
    flex-direction: column;
}

.layout-interactive-tagline {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    margin-bottom: 1rem;
    display: block;
}

.layout-interactive-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2rem;
    line-height: 1.2;
}

.layout-interactive-intro {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 3rem;
}

.layout-interactive-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color);
}

.layout-interactive-item {
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.layout-interactive-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.layout-interactive-item h3 {
    font-size: 1.25rem;
    margin: 0;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.layout-interactive-item.active h3 {
    color: var(--primary-color);
    font-weight: 700;
}

.layout-interactive-item-desc {
    display: none;
}

.layout-interactive-visual {
    position: sticky;
    top: 100px;
}

.layout-interactive-image-container {
    width: 100%;
    aspect-ratio: 4/3;
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.layout-interactive-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

.layout-interactive-image.fade-out {
    opacity: 0;
}

.layout-interactive-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(15, 23, 42, 0.4);
    z-index: 10;
    opacity: 0;
    transition: all 0.5s ease;
    padding: 2rem;
    pointer-events: none;
}

.layout-interactive-overlay.active {
    opacity: 1;
}

.layout-interactive-overlay-text {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    transform: translateY(20px);
    transition: transform 0.5s ease;
    max-width: 90%;
}

.layout-interactive-overlay.active .layout-interactive-overlay-text {
    transform: translateY(0);
}

@media (max-width: 968px) {
    .layout-interactive-split {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .layout-interactive-visual {
        position: static;
        order: -1;
    }
}

/* =========================================
   NEW LAYOUTS (Growth Marketing Support)
   ========================================= */

/* Metrics / Results Grid */
.layout-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.metric-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 2.5rem;
    border-radius: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.metric-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
}

.metric-number {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-color) 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.metric-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.75rem;
}

.metric-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Zig-Zag Section (Analytics) */
.zig-zag-section {
    padding: 6rem 0;
    background: var(--surface-color);
}

.zig-zag-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.zig-zag-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.zig-zag-content p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.zig-zag-visual {
    position: relative;
}

@media (max-width: 968px) {
    .zig-zag-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* Layout 356: Vertical Split Sections (Methodology) */
.layout-356-container {
    display: flex;
    flex-direction: column;
    gap: 8rem;
    padding: 4rem 0;
}

.layout-356-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

/* Alternating Reverse Layout */
.layout-356-row:nth-child(even) {
    direction: rtl;
}

.layout-356-row:nth-child(even)>* {
    direction: ltr;
    /* Reset text direction */
}

.layout-356-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.layout-356-number-label {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--surface-hover);
    padding-bottom: 0.5rem;
    width: fit-content;
}

.layout-356-content h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    line-height: 1.2;
}

.layout-356-content p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.layout-356-actions {
    display: flex;
    gap: 1rem;
}

.layout-356-visual {
    position: relative;
    height: 450px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.layout-356-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.layout-356-row:hover .layout-356-visual img {
    transform: scale(1.03);
}

@media (max-width: 968px) {
    .layout-356-row {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .layout-356-row:nth-child(even) {
        direction: ltr;
    }

    .layout-356-visual {
        height: 300px;
        order: -1;
        /* Always image top on mobile */
    }
}

/* Layout 415: Stacked 3D Perspective Cards (Testimonials) */
.layout-415-section {
    padding: 6rem 0;
    background: var(--bg-color);
    overflow: hidden;
}

.layout-415-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.layout-415-content {
    max-width: 500px;
}

.layout-415-content h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.layout-415-content p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
}

.layout-415-stack {
    position: relative;
    height: 480px;
    width: 100%;
    margin-top: 2rem;
}

.layout-415-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 500px;
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Card Stacking Logic */
.layout-415-card:nth-child(1) {
    z-index: 3;
    transform: translateX(0) translateY(0) scale(1);
}

.layout-415-card:nth-child(2) {
    z-index: 2;
    transform: translateX(30px) translateY(30px) scale(0.95);
    opacity: 0.8;
}

.layout-415-card:nth-child(3) {
    z-index: 1;
    transform: translateX(60px) translateY(60px) scale(0.9);
    opacity: 0.6;
}

/* Hover Interaction: Spread cards */
.layout-415-stack:hover .layout-415-card:nth-child(1) {
    transform: translateX(-40px) translateY(-30px) rotate(-2deg);
}

.layout-415-stack:hover .layout-415-card:nth-child(2) {
    transform: translateX(40px) translateY(10px) rotate(2deg);
    opacity: 1;
    z-index: 4;
    /* Pop to front if needed, or just staying visible */
}

/* Specific styling for testimonials inside cards */
.testimonial-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.testimonial-avatar-lg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e2e8f0;
    object-fit: cover;
}

.testimonial-quote-lg {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-primary);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.testimonial-stars {
    color: #fbbf24;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 4px;
}

@media (max-width: 968px) {
    .layout-415-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .layout-415-stack {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin-top: 0;
    }

    .layout-415-card {
        position: relative;
        transform: none !important;
        width: 100%;
        max-width: 100%;
        opacity: 1 !important;
    }
}


/* Layout 486: Numbered List with Alternating Sections (Stacked) */
.layout-486-section {
    padding: 6rem 0;
    background: var(--bg-color);
}

.layout-486-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Removing gap because border separates them */
}

.layout-486-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 3rem;
    padding: 4rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    align-items: start;
}

.layout-486-item:first-child {
    padding-top: 0;
}

.layout-486-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.layout-486-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    opacity: 0.3;
}

.layout-486-content-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
}

.layout-486-text {
    flex: 1;
}

.layout-486-text h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.layout-486-text p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

.layout-486-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 180px;
}

/* Responsive */
@media (max-width: 768px) {
    .layout-486-item {
        grid-template-columns: 1fr;
        /* Stack number on top */
        gap: 1rem;
    }

    .layout-486-content-wrap {
        flex-direction: column;
        gap: 1.5rem;
    }

    .layout-486-actions {
        width: 100%;
        flex-direction: row;
    }
}

/* Layout 498: Split Feature List (Text Left, Image Right) */
.layout-498-section {
    padding: 6rem 0;
    background: var(--bg-color);
}

.layout-498-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.layout-498-content {
    display: flex;
    flex-direction: column;
}

.layout-498-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.layout-498-content>p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    max-width: 90%;
}

.layout-498-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.layout-498-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.layout-498-icon-box {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: var(--surface-hover);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.75rem;
    transition: all 0.3s ease;
}

.layout-498-item:hover .layout-498-icon-box {
    background: var(--primary-color);
    color: white;
}

.layout-498-text h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.layout-498-text p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.layout-498-visual {
    position: relative;
    height: 600px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.layout-498-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 968px) {
    .layout-498-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .layout-498-visual {
        height: 400px;
        order: -1;
        /* Image top on mobile if desired, or remove to keep bottom */
    }
}

/* Layout 423: Three Column Card Grid with Image Overlay */
.layout-423-section {
    padding: 6rem 0;
    background: var(--bg-color);
}

.layout-423-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.layout-423-card {
    position: relative;
    height: 400px;
    /* Fixed height for consistent grid */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    background: #000;
    /* Fallback */
}

.layout-423-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.layout-423-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.layout-423-card:hover .layout-423-bg-img {
    transform: scale(1.05);
    /* Zoom effect */
}

.layout-423-overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6) 80%, transparent);
    color: white;
    z-index: 2;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.layout-423-card:hover .layout-423-overlay-content {
    transform: translateY(0);
}

.layout-423-overlay-content h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.layout-423-overlay-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.layout-423-link-overlay {
    color: var(--primary-color);
    /* Highlight color */
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.layout-423-link-overlay:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Layout 348: Split - Image Left, Text Right */
.layout-348-section {
    padding: 6rem 0;
    background: var(--surface-color);
}

.layout-348-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.layout-348-visual {
    position: relative;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.layout-348-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layout-348-content {
    padding-left: 2rem;
}

.layout-348-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.layout-348-content p {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.layout-348-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.layout-348-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.layout-348-list li iconify-icon {
    color: var(--primary-color);
    font-size: 1.5rem;
}

/* Layout 352: Vertical Timeline */
.layout-352-section {
    padding: 6rem 0;
    background: var(--bg-color);
}

.layout-352-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

/* Vertical Line */
.layout-352-container::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--surface-hover);
}

.layout-352-item {
    position: relative;
    padding-left: 100px;
    margin-bottom: 4rem;
}

.layout-352-item:last-child {
    margin-bottom: 0;
}

.layout-352-marker {
    position: absolute;
    left: 16px;
    top: 0;
    width: 50px;
    height: 50px;
    background: white;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--primary-color);
    z-index: 2;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.layout-352-content {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.layout-352-content h3 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

/* Layout 494: Simple Split Testimonial/Content */
.layout-494-section {
    padding: 6rem 0;
    background: var(--surface-color);
}

.layout-494-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 5rem;
    align-items: start;
}

.layout-494-left h2 {
    font-size: 3rem;
    line-height: 1.1;
    color: var(--primary-color);
}

.layout-494-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.layout-494-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.layout-494-quote {
    font-style: italic;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.layout-494-author h4 {
    margin: 0;
    font-size: 1rem;
}

.layout-494-author p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Layout 492: Split CTA Service Tiers */
.layout-492-section {
    padding: 6rem 0;
    background: var(--bg-color);
}

.layout-492-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 24px;
    overflow: hidden;
    color: white;
}

.layout-492-left {
    padding: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.layout-492-left h2 {
    color: white;
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.layout-492-left p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
}

.layout-492-right {
    background: rgba(0, 0, 0, 0.1);
    padding: 5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
}

.layout-492-option {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: white;
    transition: background 0.3s;
}

.layout-492-option:hover {
    background: rgba(255, 255, 255, 0.2);
}

.layout-492-option h4 {
    margin: 0;
    font-size: 1.25rem;
}

.layout-492-option iconify-icon {
    font-size: 1.5rem;
}

/* Responsive */
@media (max-width: 968px) {

    .layout-348-container,
    .layout-494-container,
    .layout-492-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .layout-492-left,
    .layout-492-right {
        padding: 2.5rem;
    }

    .layout-348-visual {
        height: 300px;
        order: -1;
    }

    .layout-348-content {
        padding-left: 0;
    }
}

/* Layout 354: Dark Hero with Text Overlay */
.layout-354-section {
    position: relative;
    padding: 8rem 0;
    background: #0f172a;
    color: white;
    overflow: hidden;
}

.layout-354-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    z-index: 0;
}

.layout-354-container {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.layout-354-content h2 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: white;
    line-height: 1.1;
}

.layout-354-content p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 3rem;
    line-height: 1.6;
}

.layout-354-actions {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.layout-354-btn-primary {
    background: var(--primary-color);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
}

.layout-354-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.layout-354-btn-outline {
    background: transparent;
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: background 0.2s;
}

.layout-354-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .layout-354-content h2 {
        font-size: 2.5rem;
    }

    .layout-354-actions {
        flex-direction: column;
        align-items: center;
    }
}

/* Layout 497: Icon Feature List with Large Image (Split) */
.layout-497-section {
    padding: 6rem 0;
    background: var(--bg-color);
}

.layout-497-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.layout-497-content {
    display: flex;
    flex-direction: column;
}

.layout-497-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.layout-497-content>p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    max-width: 90%;
}

.layout-497-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.layout-497-item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.25rem;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.layout-497-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateX(5px);
}

.layout-497-icon-box {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: var(--surface-hover);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.layout-497-item:hover .layout-497-icon-box {
    background: var(--primary-color);
    color: white;
}

.layout-497-text h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.layout-497-text p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.layout-497-visual {
    position: relative;
    height: 550px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.layout-497-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

/* Active State for Interactive Selection */
.layout-497-item.active {
    border-color: var(--primary-color);
    background: var(--surface-hover);
}

.layout-497-item.active .layout-497-icon-box {
    background: var(--primary-color);
    color: white;
}

@media (max-width: 968px) {
    .layout-497-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .layout-497-visual {
        height: 350px;
        order: -1;
    }
}

/* Layout 507/508: Horizontal Tab Interface */
.layout-507-section {
    padding: 6rem 0;
    background: var(--bg-color);
}

.layout-507-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2rem;
}

.layout-507-header h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.layout-507-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.layout-507-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 3rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.layout-507-tabs::-webkit-scrollbar {
    display: none;
}

.layout-507-tab {
    padding: 1rem 2rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.layout-507-tab:hover {
    color: var(--primary-color);
}

.layout-507-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.layout-507-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.layout-507-text-container {
    position: relative;
    min-height: 200px;
}

.layout-507-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.layout-507-text.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.layout-507-text .tagline {
    display: inline-block;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.layout-507-text h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.layout-507-text p {
    color: var(--text-secondary);
    line-height: 1.7;
}

.layout-507-visual {
    position: relative;
    height: 400px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface-hover);
}

.layout-507-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

@media (max-width: 968px) {
    .layout-507-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .layout-507-visual {
        height: 280px;
        order: -1;
    }

    .layout-507-text-container {
        min-height: auto;
    }

    .layout-507-text.active {
        position: relative;
    }
}

@media (max-width: 576px) {
    .layout-507-tab {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* Layout 486 Scroll Reveal Animations */
.layout-486-item[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.layout-486-item[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Pricing Section (Section 11) */
.layout-pricing-section {
    padding: 6rem 0;
    background: var(--surface-color);
}

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

.pricing-card {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.pricing-card.featured {
    border-color: var(--primary-color);
    position: relative;
}

.pricing-card.featured::before {
    content: 'Most Popular';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.pricing-tier {
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.pricing-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.pricing-price {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.pricing-price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.pricing-desc {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.pricing-features li {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pricing-features li::before {
    content: '✓';
    color: var(--primary-color);
    font-weight: 700;
}

@media (max-width: 968px) {
    .layout-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Layout 497/498 Button Container */
.layout-497-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* Arrow Button (Secondary) */
.btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    color: var(--primary-color);
    font-weight: 600;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    background: transparent;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-arrow:hover {
    background: var(--primary-color);
    color: white;
}

.btn-arrow iconify-icon {
    transition: transform 0.3s ease;
}

.btn-arrow:hover iconify-icon {
    transform: translateX(4px);
}

/* ============================================
   LAYOUT 507 - Horizontal Tabs with Split Content
   ============================================ */
.layout-507-section {
    padding: 6rem 0;
    background: rgba(255, 255, 255, 0.02);
}

.layout-507-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.layout-507-header .tagline {
    display: block;
    margin-bottom: 0.75rem;
}

.layout-507-header h2 {
    margin-bottom: 1rem;
}

.layout-507-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Horizontal Tabs Navigation */
.layout-507-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 3rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.layout-507-tab {
    padding: 1rem 2rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.layout-507-tab:hover {
    color: var(--text-color);
}

.layout-507-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* Split Content Area */
.layout-507-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.layout-507-text-container {
    position: relative;
    min-height: 200px;
}

.layout-507-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.layout-507-text.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.layout-507-text .tagline {
    display: block;
    margin-bottom: 0.5rem;
}

.layout-507-text h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.layout-507-text p {
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Visual Area */
.layout-507-visual {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
}

.layout-507-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* Responsive */
@media (max-width: 968px) {
    .layout-507-section {
        padding: 4rem 0;
    }

    .layout-507-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .layout-507-visual {
        order: -1;
    }

    .layout-507-tabs {
        justify-content: flex-start;
        padding: 0 1rem;
    }

    .layout-507-tab {
        padding: 0.875rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* ============================================
   LAYOUT 422 - Three-Column Card Grid
   ============================================ */
.layout-422-section {
    padding: 6rem 0;
}

.layout-422-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.layout-422-header .tagline {
    display: block;
    margin-bottom: 0.75rem;
}

.layout-422-header h2 {
    margin-bottom: 1rem;
}

.layout-422-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
}

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

.layout-422-testimonials {
    grid-template-columns: repeat(2, 1fr);
}

.layout-422-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
    display: block;
    text-decoration: none;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.layout-422-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.layout-422-image {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.layout-422-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.layout-422-card:hover .layout-422-image img {
    transform: scale(1.05);
}

.layout-422-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.layout-422-overlay .tagline {
    color: var(--primary-color);
}

.layout-422-overlay h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.layout-422-overlay p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.testimonial-quote {
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.testimonial-author h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.testimonial-author p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

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

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

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

/* ============================================
   LAYOUT 494 - Split Layout with Text List
   ============================================ */
.layout-494-section {
    padding: 6rem 0;
    background: rgba(255, 255, 255, 0.02);
}

.layout-494-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.layout-494-visual {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
}

.layout-494-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layout-494-content .tagline {
    display: block;
    margin-bottom: 0.75rem;
}

.layout-494-content h2 {
    margin-bottom: 1rem;
}

.layout-494-content>p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.layout-494-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.layout-494-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

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

.layout-494-item h4 {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 0;
    transition: color 0.3s ease;
}

.layout-494-item p {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-top: 0;
    transition: all 0.3s ease;
}

.layout-494-item.active h4 {
    color: var(--text-color);
    font-weight: 700;
}

.layout-494-item.active p {
    max-height: 100px;
    opacity: 1;
    margin-top: 0.5rem;
}

.layout-494-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 968px) {
    .layout-494-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .layout-494-visual {
        order: -1;
    }
}

/* ============================================
   LAYOUT 496 - Centered Header with Split Content
   ============================================ */
.layout-496-section {
    padding: 6rem 0;
    background: rgba(255, 255, 255, 0.02);
}

.layout-496-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.layout-496-header .tagline {
    display: block;
    margin-bottom: 0.75rem;
}

.layout-496-header h2 {
    margin-bottom: 1rem;
}

.layout-496-header p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.layout-496-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.layout-496-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.layout-496-visual {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
}

.layout-496-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layout-496-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.layout-496-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.layout-496-item:hover,
.layout-496-item.active {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.05);
}

.layout-496-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: white;
    border-radius: 12px;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.layout-496-text h4 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.layout-496-text p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

@media (max-width: 968px) {
    .layout-496-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .layout-496-visual {
        order: -1;
    }
}

/* ============================================
   LAYOUT 356 - Numbered Feature Steps
   ============================================ */
.layout-356-section {
    padding: 6rem 0;
}

.layout-356-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.layout-356-header .tagline {
    display: block;
    margin-bottom: 0.75rem;
}

.layout-356-header h2 {
    margin-bottom: 1rem;
}

.layout-356-header p {
    color: var(--text-secondary);
}

.layout-356-steps {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.layout-356-step {
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--border-color);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.layout-356-step[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
}

.layout-356-step[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

.layout-356-step:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.layout-356-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
}

.layout-356-content .tagline {
    display: block;
    margin-bottom: 0.5rem;
}

.layout-356-content h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.layout-356-content p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.layout-356-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.layout-356-visual {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
}

.layout-356-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 968px) {
    .layout-356-step {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .layout-356-number {
        font-size: 2.5rem;
    }

    .layout-356-buttons {
        justify-content: center;
    }
}

/* ============================================
   BLUE WAVE Metrics Section
   ============================================ */
.layout-bluewave-section {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

.layout-bluewave-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #0ea5e9 100%);
    z-index: 0;
}

.layout-bluewave-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,60 C300,120 600,0 900,60 C1050,90 1150,30 1200,60 L1200,120 L0,120 Z' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E") no-repeat bottom;
    background-size: cover;
}

.layout-bluewave-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.layout-bluewave-content h2 {
    color: white;
    margin-bottom: 1rem;
}

.layout-bluewave-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    line-height: 1.7;
}

.layout-bluewave-metrics {
    display: flex;
    gap: 2rem;
    justify-content: flex-end;
}

.bluewave-metric {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    min-width: 140px;
}

.bluewave-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
}

.bluewave-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 968px) {
    .layout-bluewave-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .layout-bluewave-metrics {
        justify-content: center;
        flex-wrap: wrap;
    }
}
/* Layout 498: Split with Icon List (Interactive Accordion Style) */
.layout-498-section {
    padding: var(--section-gap) 0;
    overflow: hidden;
}

.layout-498-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.layout-498-visual {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--glass-border);
    height: 100%;
    min-height: 500px;
}

.layout-498-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.layout-498-visual:hover img {
    transform: scale(1.05);
}

.layout-498-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.layout-498-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.layout-498-item {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid transparent;
    border-radius: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.layout-498-item.active,
.layout-498-item:hover {
    background: white;
    box-shadow: var(--shadow-md);
    border-color: rgba(var(--primary-rgb), 0.2);
    transform: translateX(10px);
}

.layout-498-icon {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.layout-498-item.active .layout-498-icon,
.layout-498-item:hover .layout-498-icon {
    background: var(--primary-color);
    color: white;
}

.layout-498-text {
    flex: 1;
}

.layout-498-text h4 {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
    font-weight: 700;
}

.layout-498-text p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    opacity: 0.8;
}

.layout-498-item.active .layout-498-text p {
    opacity: 1;
}

@media (max-width: 992px) {
    .layout-498-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .layout-498-visual {
        min-height: 300px;
        order: -1;
    }
}
/* =========================================
   PHASE 16: NEW FLOATING HEADER & MEGA MENU
   ========================================= */

/* Floating Island Container */
.main-header {
    position: fixed;
    top: 1.5rem; /* Floating off top */
    left: 0; 
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    pointer-events: none; /* Let clicks pass through outside the bar */
}

.nav-container {
    width: 95%;
    max-width: 1400px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px; /* Rounded pill shape */
    padding: 0.75rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 40px rgba(0, 71, 140, 0.1);
    pointer-events: auto; /* Re-enable clicks */
    transition: all 0.3s ease;
}

/* Scrolled State (Optional: wide bar) */
.main-header.scrolled .nav-container {
    width: 98%;
    top: 0.5rem;
    padding: 0.5rem 2rem;
    background: rgba(255, 255, 255, 0.95);
}

/* Logo */
.logo-img-style {
    height: 32px;
    width: auto;
}

/* Desktop Nav */
.nav-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Nav Items */
.nav-item {
    position: relative;
}

.nav-link-btn {
    background: transparent;
    border: none;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-primary);
    padding: 0.75rem 1.25rem;
    border-radius: 99px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.nav-link-btn:hover, .nav-item:hover .nav-link-btn {
    background: rgba(52, 152, 219, 0.08); /* Light Blue Tint */
    color: var(--primary-color);
}

.nav-link-btn iconify-icon {
    font-size: 0.8em;
    opacity: 0.6;
    transition: transform 0.2s;
}

.nav-item:hover .nav-link-btn iconify-icon {
    transform: rotate(180deg);
}

/* --- MEGA MENU --- */
.mega-menu-container {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: max-content;
    min-width: 600px;
    background: white;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 40, 90, 0.15);
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2rem;
    z-index: 1001;
}

.nav-item:hover .mega-menu-container {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(10px);
}

/* Mega Menu Left (Featured) */
.mega-menu-left {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mega-menu-left h4 {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.mega-menu-left p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.mega-link-main {
    font-weight: 600;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mega Menu Right (Grid) */
.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.mega-menu-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.2s;
}

.mega-menu-item:hover {
    background: #F8FAFC;
}

.mega-icon-box {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.25rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

.mega-item-text {
    display: flex;
    flex-direction: column;
}

.mega-item-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.mega-item-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Contact Button */
.btn-header-cta {
    background: var(--primary-color);
    color: white !important;
    padding: 0.75rem 1.75rem;
    border-radius: 99px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
    transition: all 0.3s;
}

.btn-header-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.5);
    background: var(--secondary-color);
}

/* --- MOBILE DRAWER --- */
.mobile-toggle {
    display: none; /* Hidden on Desktop */
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-primary);
    cursor: pointer;
}

.mobile-drawer-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.mobile-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    background: white;
    z-index: 1101;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    padding: 2rem;
    overflow-y: auto;
}

.mobile-drawer.active {
    transform: translateX(0);
}

.mobile-menu-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.mobile-group h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    letter-spacing: 0.1em;
}

.mobile-link {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0.5rem 0;
}

@media (max-width: 1100px) {
    .nav-links { display: none; }
    .mobile-toggle { display: block; }
    .nav-container { justify-content: space-between; }
}

/* PHASE 18 FIX: Specificity Override */
.nav-links .nav-link-btn {
    padding: 0.75rem 1.25rem !important; /* Force override old padding */
    font-size: 0.95rem !important;
    background: transparent;
    color: var(--text-primary);
    text-decoration: none; /* remove underline from link */
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.nav-links .nav-link-btn:hover {
    background: rgba(52, 152, 219, 0.08);
    color: var(--primary-color) !important; 
}

/* Fix Container Width/Radius Conflict */
.main-header .nav-container {
    width: 95% !important;
    border-radius: 20px !important;
    top: auto; /* Reset */
    border-bottom: 1px solid rgba(255,255,255,0.6); /* Ensure border matches new style */
}

/* Ensure mobile toggle is visible on mobile */
@media (max-width: 1100px) {
    .mobile-toggle {
        display: block !important;
    }
    .nav-links {
        display: none !important;
    }
}

/* PHASE 19: HEADER REFINEMENTS */

/* 1. Header Container Spacing */
.main-header .nav-container {
    padding: 0.5rem 3rem !important; /* Widen side padding */
    height: 80px; /* Enforce height for vertical centering */
    box-shadow: 0 8px 32px rgba(0, 71, 140, 0.08); /* Softer shadow */
}

/* 2. Logo Size Fix */
.logo-img-style {
    height: 40px !important; /* Slightly larger */
    width: auto !important;
    max-height: 100%;
}
.logo {
    display: flex;
    align-items: center;
    height: 100%;
}

/* 3. Nav Links Spacing */
.nav-links {
    gap: 2rem !important; /* Increase gap between items */
    height: 100%;
    align-items: center;
}

/* 4. Contact Button Alignment */
.btn-header-cta {
    margin-left: 2rem !important; /* Push CTA further right */
    padding: 0.6rem 1.75rem !important; /* Compact pill */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px; /* Match height visual */
}

/* 5. Clean up Nav Item Buttons */
.nav-links .nav-link-btn {
    padding: 0.6rem 1rem !important; /* Reduce horizontal padding inside pill */
    font-size: 1rem !important;
    gap: 0.5rem;
}

/* 6. Active State (Optional) */
.nav-links .nav-link-btn:active {
    transform: scale(0.98);
}

/* =========================================
   PHASE 20: GLASSY CLOTH BANNER HEADER
   ========================================= */

/* Disable old main-header layout logic that might conflict */
.main-header {
    pointer-events: none; /* Container itself passes clicks */
    background: transparent !important; /* Ensure no bg on container */
    box-shadow: none !important;
    top: 0 !important;
    left: 0; right: 0;
    height: 0; /* Don't block content */
    display: block !important; /* Reset flex */
}

/* 1. GLASSY CLOTH BANNER (The Pennant) */
.logo-banner {
    position: fixed;
    top: 0;
    left: 4%; /* Positioning from left */
    width: 120px;
    height: 160px; /* Length of banner */
    z-index: 1002;
    pointer-events: auto;
    
    /* The Glass Effect */
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-top: none; /* Hanging from top */
    
    /* The Cloth/Pennant Shape */
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    
    /* Cloth Texture / Shadow overlay */
    background-image: 
        linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.05) 100%),
        repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(0,0,0,0.02) 12px, transparent 15px); /* fabric wave hint */
        
    box-shadow: 
        0 10px 30px rgba(0, 71, 140, 0.2),
        inset 0 0 20px rgba(255,255,255,0.3);
        
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px; /* Account for point at bottom */
    transition: transform 0.3s ease, height 0.3s ease;
    transform-origin: top center;
}

/* Rod Effect (Optional visual at top) */
.logo-banner::before {
    content: '';
    position: absolute;
    top: 0; left: -10px; right: -10px;
    height: 6px;
    background: linear-gradient(90deg, #bdc3c7, #ecf0f1, #bdc3c7);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 2;
}

.logo-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.logo-img-style {
    width: 60px !important;
    height: auto !important;
    filter: drop-shadow(0 4px 6px rgba(52, 152, 219, 0.3));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.logo-banner:hover .logo-img-style {
    transform: scale(1.1) rotate(5deg);
}


/* 2. FLOATING NAV PILL (The Links) */
.floating-nav-pill {
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translateX(-40%); /* Offset to right because logo is on left */
    z-index: 1001;
    pointer-events: auto;
    
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 99px;
    padding: 0.5rem 2rem;
    
    display: flex;
    align-items: center;
    gap: 1.5rem;
    
    box-shadow: 
        0 10px 40px -10px rgba(0, 71, 140, 0.15),
        0 2px 10px -2px rgba(0, 71, 140, 0.05); /* Softer, floaty shadow */
        
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Scrolled State */
body.scrolled .floating-nav-pill {
    top: 1rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.4rem 2rem;
    box-shadow: 0 15px 35px -5px rgba(0, 71, 140, 0.2);
}
body.scrolled .logo-banner {
    transform: translateY(-10px) scale(0.9); /* Slight tuck up */
}

/* Nav Item Tweaks for Pill */
.nav-links {
    display: flex !important; /* Ensure flex */
    gap: 0.5rem !important; /* Tighter gap inside pill */
}

.nav-link-btn {
    padding: 0.6rem 1.1rem !important;
    border-radius: 99px;
    font-size: 0.95rem !important;
}

/* Button CTA in Pill */
.btn-header-cta {
    margin-left: 1.5rem !important;
    padding: 0.6rem 1.5rem !important;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

/* Mobile Tweaks */
@media (max-width: 1100px) {
    .floating-nav-pill {
        width: auto;
        left: auto;
        right: 20px;
        transform: none; /* Reset center */
        padding: 0.5rem 1rem;
    }
    .logo-banner {
        width: 80px;
        height: 100px;
        left: 20px;
    }
    .logo-img-style {
        width: 40px !important;
    }
    .nav-links {
        display: none !important; /* Hide links on mobile */
    }
    .mobile-toggle {
        display: block !important;
    }
}

/* PHASE 22: MEGA MENU REFINEMENTS */

/* Ensure Nav Link (<a>) behaves like button */
.nav-item .nav-link-btn {
    cursor: pointer;
    text-decoration: none; /* No underline */
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Hover Logic for Mega Menu */
.nav-item:hover .mega-menu-container {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(10px);
    pointer-events: auto;
}

/* Adjust Mega Menu Width/Grid for larger content */
.mega-menu-container {
    padding: 2rem;
    gap: 2.5rem;
    min-width: 700px; /* Wider for 2-col content */
}

/* Special Case: Intelligent Systems might need wider? */

/* Mega Menu Grid - Ensure consistent sizing */
.mega-menu-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 Columns standard */
    gap: 1.5rem 2rem; /* Row / Col gap */
}

/* Tiny text adjustments */
.mega-item-title {
    font-size: 0.9rem;
    line-height: 1.3;
}
.mega-item-desc {
    display: none; /* Hide descriptions to save space for long lists? Or keep? 
                     User list didn't specify desc, but UI looks better with them. 
                     I will try to keep them if I can infer them, or just hide them for the new items to keep it clean.
                     Actually, with 11 items, hiding desc might be cleaner. 
                     Let's make desc optional. */
}
.mega-menu-item {
    padding: 0.5rem;
    align-items: center;
}
.mega-icon-box {
    width: 32px; height: 32px; font-size: 1rem; /* Smaller icons */
}

/* PHASE 23: MEGA MENU ALIGNMENT FIX */

/* First Item (Growth Marketing): Align Left */
.nav-links > .nav-item:nth-child(1) .mega-menu-container {
    left: 0 !important;
    transform: translateY(10px) !important; /* Remove X centering, keep Y offset */
    right: auto;
}

/* Second Left Item (App & Software): Keep centered or shift slightly right if needed */
/* Default is center, which is fine usually, but lets ensure it doesnt clip left if screen is small. */

/* Last Item (Intelligent Systems): Align Right to prevent right overflow */
.nav-links > .nav-item:nth-child(4) .mega-menu-container {
    left: auto !important;
    right: 0 !important;
    transform: translateY(10px) !important;
}

/* Ensure hovered state keeps the transform simple */
.nav-links > .nav-item:nth-child(1):hover .mega-menu-container {
    transform: translateY(0px) !important;
}
.nav-links > .nav-item:nth-child(4):hover .mega-menu-container {
    transform: translateY(0px) !important;
}

/* General safety for smaller Desktop screens */
@media (max-width: 1400px) {
    .mega-menu-container {
        min-width: 600px; /* Slightly shrink min-width */
        padding: 1.5rem;
    }
}

/* PHASE 24: LOGO SIZE INCREASE */

/* Increase Banner Size to accommodate bigger logo */
.logo-banner {
    width: 140px !important;  /* Was 120px */
    height: 190px !important; /* Was 160px */
}

/* Increase Logo Image Size */
.logo-img-style {
    width: 90px !important;   /* Was 60px */
    height: auto !important;
}

/* Adjust Rod Width slightly */
.logo-banner::before {
    left: -12px !important;
    right: -12px !important;
}

/* Mobile Tweak: Ensure it doesn't break mobile */
@media (max-width: 1100px) {
    .logo-banner {
        width: 90px !important;
        height: 120px !important;
    }
    .logo-img-style {
        width: 50px !important;
    }
}

/* PHASE 25: HUGE LOGO OVERRIDE */

/* Make Banner HUGE */
.logo-banner {
    width: 200px !important;   /* Significantly larger */
    height: 260px !important;
    left: 2% !important; /* Move slightly closer to edge so it doesn't encroach on content */
}

/* Make Logo Image HUGE */
.logo-img-style {
    width: 140px !important;
    height: auto !important;
}

/* Adjust Rod Width */
.logo-banner::before {
    left: -15px !important;
    right: -15px !important;
    height: 8px !important; /* Thicker rod for bigger banner */
}

/* Scroll State: Tuck it up a bit more because it's huge */
body.scrolled .logo-banner {
    transform: translateY(-40px) scale(0.7) !important; /* Shrink more on scroll */
}

/* Mobile Safety: Keep it reasonable on mobile */
@media (max-width: 1100px) {
    .logo-banner {
        width: 100px !important;
        height: 130px !important;
        left: 15px !important;
    }
    .logo-img-style {
        width: 60px !important;
    }
}

/* PHASE 26: PREMIUM FOOTER STYLES */
.main-footer {
    background: #f8fafc; /* Very light cool gray */
    padding: 5rem 0 2rem;
    border-top: 1px solid rgba(0,0,0,0.05);
    font-family: 'Outfit', sans-serif;
}
/* Dark mode adaptation if needed, but for now light theme base */

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

/* Column 1: Brand & Newsletter */
.footer-brand h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}
.footer-text {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.footer-newsletter {
    position: relative;
    max-width: 320px;
}
.newsletter-input {
    width: 100%;
    padding: 0.8rem 1rem;
    padding-right: 3rem;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.1);
    background: white;
    font-family: inherit;
    transition: all 0.2s;
}
.newsletter-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.newsletter-btn {
    position: absolute;
    right: 6px;
    top: 6px;
    bottom: 6px;
    padding: 0 1rem;
    border-radius: 8px;
    background: var(--primary-color);
    color: white;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.2s;
}
.newsletter-btn:hover {
    transform: scale(1.05);
}

/* Columns: Links */
.footer-nav-col h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}
.footer-link {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 0.8rem;
    transition: color 0.2s, transform 0.2s;
    font-size: 0.95rem;
}
.footer-link:hover {
    color: var(--primary-color);
    transform: translateX(4px);
}

/* Col 4: Social Grid */
.social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cols of icons */
    gap: 1rem;
}
.social-icon-box {
    width: 48px;
    height: 48px;
    background: white;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-secondary);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    text-decoration: none;
}
.social-icon-box:hover {
    transform: translateY(-5px);
    background: var(--primary-color);
    color: white;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}

/* Bottom Bar */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(0,0,0,0.05);
    flex-wrap: wrap;
    gap: 1rem;
}
.copyright {
    color: var(--text-muted);
    font-size: 0.9rem;
}
.legal-links {
    display: flex;
    gap: 2rem;
}
.legal-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}
.legal-link:hover {
    color: var(--primary-color);
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Stack on mobile */
        gap: 3rem;
    }
}

/* === Extracted from: contact.html === */
/* Contact specific styles */
        .contact-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: start;
        }

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

        .contact-form-container {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 2.5rem;
            border-radius: 24px;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        .form-control {
            width: 100%;
            padding: 1rem;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: var(--text-primary);
            font-family: inherit;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            background: rgba(0, 0, 0, 0.4);
        }

        .contact-info-item {
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .contact-icon {
            width: 48px;
            height: 48px;
            background: var(--surface-hover);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--primary-color);
            flex-shrink: 0;
        }

/* === Extracted from: portfolio.html === */
.filter-bar {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 3rem;
            flex-wrap: wrap;
        }

        .filter-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 0.5rem 1.5rem;
            border-radius: 99px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .filter-btn.active,
        .filter-btn:hover {
            background: var(--surface-hover);
            color: var(--primary-color);
            border-color: var(--primary-color);
        }

/* === Extracted from: temp_live_site.html === */
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */

/* === Extracted from: temp_live_site.html === */
.wp-block-group{box-sizing:border-box}:where(.wp-block-group.wp-block-group-is-layout-constrained){position:relative}
/*# sourceURL=https://www.bluecloverr.com/wp-includes/blocks/group/style.min.css */

/* === Extracted from: temp_live_site.html === */
:where(.wp-block-group.has-background){padding:1.25em 2.375em}
/*# sourceURL=https://www.bluecloverr.com/wp-includes/blocks/group/theme.min.css */

/* === Extracted from: temp_live_site.html === */
.wp-block-navigation{position:relative}.wp-block-navigation ul{margin-bottom:0;margin-left:0;margin-top:0;padding-left:0}.wp-block-navigation ul,.wp-block-navigation ul li{list-style:none;padding:0}.wp-block-navigation .wp-block-navigation-item{align-items:center;background-color:inherit;display:flex;position:relative}.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty{display:none}.wp-block-navigation .wp-block-navigation-item__content{display:block;z-index:1}.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit}.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content,.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:active,.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:focus{text-decoration:underline}.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content,.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:active,.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:focus{text-decoration:line-through}.wp-block-navigation :where(a),.wp-block-navigation :where(a:active),.wp-block-navigation :where(a:focus){text-decoration:none}.wp-block-navigation .wp-block-navigation__submenu-icon{align-self:center;background-color:inherit;border:none;color:currentColor;display:inline-block;font-size:inherit;height:.6em;line-height:0;margin-left:.25em;padding:0;width:.6em}.wp-block-navigation .wp-block-navigation__submenu-icon svg{display:inline-block;stroke:currentColor;height:inherit;margin-top:.075em;width:inherit}.wp-block-navigation{--navigation-layout-justification-setting:flex-start;--navigation-layout-direction:row;--navigation-layout-wrap:wrap;--navigation-layout-justify:flex-start;--navigation-layout-align:center}.wp-block-navigation.is-vertical{--navigation-layout-direction:column;--navigation-layout-justify:initial;--navigation-layout-align:flex-start}.wp-block-navigation.no-wrap{--navigation-layout-wrap:nowrap}.wp-block-navigation.items-justified-center{--navigation-layout-justification-setting:center;--navigation-layout-justify:center}.wp-block-navigation.items-justified-center.is-vertical{--navigation-layout-align:center}.wp-block-navigation.items-justified-right{--navigation-layout-justification-setting:flex-end;--navigation-layout-justify:flex-end}.wp-block-navigation.items-justified-right.is-vertical{--navigation-layout-align:flex-end}.wp-block-navigation.items-justified-space-between{--navigation-layout-justification-setting:space-between;--navigation-layout-justify:space-between}.wp-block-navigation .has-child .wp-block-navigation__submenu-container{align-items:normal;background-color:inherit;color:inherit;display:flex;flex-direction:column;opacity:0;position:absolute;z-index:2}@media not (prefers-reduced-motion){.wp-block-navigation .has-child .wp-block-navigation__submenu-container{transition:opacity .1s linear}}.wp-block-navigation .has-child .wp-block-navigation__submenu-container{height:0;overflow:hidden;visibility:hidden;width:0}.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content{display:flex;flex-grow:1;padding:.5em 1em}.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content .wp-block-navigation__submenu-icon{margin-left:auto;margin-right:0}.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content{margin:0}.wp-block-navigation .has-child .wp-block-navigation__submenu-container{left:-1px;top:100%}@media (min-width:782px){.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{left:100%;top:-1px}.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container:before{background:#0000;content:"";display:block;height:100%;position:absolute;right:100%;width:.5em}.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon{margin-right:.25em}.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg{transform:rotate(-90deg)}}.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container,.wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container,.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within>.wp-block-navigation__submenu-container{height:auto;min-width:200px;opacity:1;overflow:visible;visibility:visible;width:auto}.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container{left:0;top:100%}@media (min-width:782px){.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{left:100%;top:0}}.wp-block-navigation-submenu{display:flex;position:relative}.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg{stroke:currentColor}button.wp-block-navigation-item__content{background-color:initial;border:none;color:currentColor;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;text-transform:inherit}.wp-block-navigation-submenu__toggle{cursor:pointer}.wp-block-navigation-submenu__toggle[aria-expanded=true]+.wp-block-navigation__submenu-icon>svg,.wp-block-navigation-submenu__toggle[aria-expanded=true]>svg{transform:rotate(180deg)}.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle{padding-left:0;padding-right:.85em}.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle+.wp-block-navigation__submenu-icon{margin-left:-.6em;pointer-events:none}.wp-block-navigation-item.open-on-click button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle){padding:0}.wp-block-navigation .wp-block-page-list,.wp-block-navigation__container,.wp-block-navigation__responsive-close,.wp-block-navigation__responsive-container,.wp-block-navigation__responsive-container-content,.wp-block-navigation__responsive-dialog{gap:inherit}:where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)),:where(.wp-block-navigation.has-background .wp-block-navigation-submenu a:not(.wp-element-button)){padding:.5em 1em}:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu button.wp-block-navigation-item__content),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item button.wp-block-navigation-item__content){padding:.5em 1em}.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container{left:auto;right:0}.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{left:-1px;right:-1px}@media (min-width:782px){.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{left:auto;right:100%}}.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{background-color:#fff;border:1px solid #00000026}.wp-block-navigation.has-background .wp-block-navigation__submenu-container{background-color:inherit}.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container{color:#000}.wp-block-navigation__container{align-items:var(--navigation-layout-align,initial);display:flex;flex-direction:var(--navigation-layout-direction,initial);flex-wrap:var(--navigation-layout-wrap,wrap);justify-content:var(--navigation-layout-justify,initial);list-style:none;margin:0;padding-left:0}.wp-block-navigation__container .is-responsive{display:none}.wp-block-navigation__container:only-child,.wp-block-page-list:only-child{flex-grow:1}@keyframes overlay-menu__fade-in-animation{0%{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:translateY(0)}}.wp-block-navigation__responsive-container{bottom:0;display:none;left:0;position:fixed;right:0;top:0}.wp-block-navigation__responsive-container :where(.wp-block-navigation-item a){color:inherit}.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{align-items:var(--navigation-layout-align,initial);display:flex;flex-direction:var(--navigation-layout-direction,initial);flex-wrap:var(--navigation-layout-wrap,wrap);justify-content:var(--navigation-layout-justify,initial)}.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open){background-color:inherit!important;color:inherit!important}.wp-block-navigation__responsive-container.is-menu-open{background-color:inherit;display:flex;flex-direction:column}@media not (prefers-reduced-motion){.wp-block-navigation__responsive-container.is-menu-open{animation:overlay-menu__fade-in-animation .1s ease-out;animation-fill-mode:forwards}}.wp-block-navigation__responsive-container.is-menu-open{overflow:auto;padding:clamp(1rem,var(--wp--style--root--padding-top),20rem) clamp(1rem,var(--wp--style--root--padding-right),20rem) clamp(1rem,var(--wp--style--root--padding-bottom),20rem) clamp(1rem,var(--wp--style--root--padding-left),20rem);z-index:100000}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{align-items:var(--navigation-layout-justification-setting,inherit);display:flex;flex-direction:column;flex-wrap:nowrap;overflow:visible;padding-top:calc(2rem + 24px)}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list{justify-content:flex-start}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon{display:none}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container{border:none;height:auto;min-width:200px;opacity:1;overflow:initial;padding-left:2rem;padding-right:2rem;position:static;visibility:visible;width:auto}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{gap:inherit}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{padding-top:var(--wp--style--block-gap,2em)}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{padding:0}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list{align-items:var(--navigation-layout-justification-setting,initial);display:flex;flex-direction:column}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list{background:#0000!important;color:inherit!important}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{left:auto;right:auto}@media (min-width:600px){.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){background-color:inherit;display:block;position:relative;width:100%;z-index:auto}.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close{display:none}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{left:0}}.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{background-color:#fff}.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open{color:#000}.wp-block-navigation__toggle_button_label{font-size:1rem;font-weight:700}.wp-block-navigation__responsive-container-close,.wp-block-navigation__responsive-container-open{background:#0000;border:none;color:currentColor;cursor:pointer;margin:0;padding:0;text-transform:inherit;vertical-align:middle}.wp-block-navigation__responsive-container-close svg,.wp-block-navigation__responsive-container-open svg{fill:currentColor;display:block;height:24px;pointer-events:none;width:24px}.wp-block-navigation__responsive-container-open{display:flex}.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{font-family:inherit;font-size:inherit;font-weight:inherit}@media (min-width:600px){.wp-block-navigation__responsive-container-open:not(.always-shown){display:none}}.wp-block-navigation__responsive-container-close{position:absolute;right:0;top:0;z-index:2}.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close{font-family:inherit;font-size:inherit;font-weight:inherit}.wp-block-navigation__responsive-close{width:100%}.has-modal-open .wp-block-navigation__responsive-close{margin-left:auto;margin-right:auto;max-width:var(--wp--style--global--wide-size,100%)}.wp-block-navigation__responsive-close:focus{outline:none}.is-menu-open .wp-block-navigation__responsive-close,.is-menu-open .wp-block-navigation__responsive-container-content,.is-menu-open .wp-block-navigation__responsive-dialog{box-sizing:border-box}.wp-block-navigation__responsive-dialog{position:relative}.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog{margin-top:46px}@media (min-width:782px){.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog{margin-top:32px}}html.has-modal-open{overflow:hidden}
/*# sourceURL=https://www.bluecloverr.com/wp-includes/blocks/navigation/style.min.css */

/* === Extracted from: temp_live_site.html === */
.wp-block-button__link{align-content:center;box-sizing:border-box;cursor:pointer;display:inline-block;height:100%;text-align:center;word-break:break-word}.wp-block-button__link.aligncenter{text-align:center}.wp-block-button__link.alignright{text-align:right}:where(.wp-block-button__link){border-radius:9999px;box-shadow:none;padding:calc(.667em + 2px) calc(1.333em + 2px);text-decoration:none}.wp-block-button[style*=text-decoration] .wp-block-button__link{text-decoration:inherit}.wp-block-buttons>.wp-block-button.has-custom-width{max-width:none}.wp-block-buttons>.wp-block-button.has-custom-width .wp-block-button__link{width:100%}.wp-block-buttons>.wp-block-button.has-custom-font-size .wp-block-button__link{font-size:inherit}.wp-block-buttons>.wp-block-button.wp-block-button__width-25{width:calc(25% - var(--wp--style--block-gap, .5em)*.75)}.wp-block-buttons>.wp-block-button.wp-block-button__width-50{width:calc(50% - var(--wp--style--block-gap, .5em)*.5)}.wp-block-buttons>.wp-block-button.wp-block-button__width-75{width:calc(75% - var(--wp--style--block-gap, .5em)*.25)}.wp-block-buttons>.wp-block-button.wp-block-button__width-100{flex-basis:100%;width:100%}.wp-block-buttons.is-vertical>.wp-block-button.wp-block-button__width-25{width:25%}.wp-block-buttons.is-vertical>.wp-block-button.wp-block-button__width-50{width:50%}.wp-block-buttons.is-vertical>.wp-block-button.wp-block-button__width-75{width:75%}.wp-block-button.is-style-squared,.wp-block-button__link.wp-block-button.is-style-squared{border-radius:0}.wp-block-button.no-border-radius,.wp-block-button__link.no-border-radius{border-radius:0!important}:root :where(.wp-block-button .wp-block-button__link.is-style-outline),:root :where(.wp-block-button.is-style-outline>.wp-block-button__link){border:2px solid;padding:.667em 1.333em}:root :where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color)),:root :where(.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-text-color)){color:currentColor}:root :where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background)),:root :where(.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background)){background-color:initial;background-image:none}
/*# sourceURL=https://www.bluecloverr.com/wp-includes/blocks/button/style.min.css */

/* === Extracted from: temp_live_site.html === */
.wp-block-buttons{box-sizing:border-box}.wp-block-buttons.is-vertical{flex-direction:column}.wp-block-buttons.is-vertical>.wp-block-button:last-child{margin-bottom:0}.wp-block-buttons>.wp-block-button{display:inline-block;margin:0}.wp-block-buttons.is-content-justification-left{justify-content:flex-start}.wp-block-buttons.is-content-justification-left.is-vertical{align-items:flex-start}.wp-block-buttons.is-content-justification-center{justify-content:center}.wp-block-buttons.is-content-justification-center.is-vertical{align-items:center}.wp-block-buttons.is-content-justification-right{justify-content:flex-end}.wp-block-buttons.is-content-justification-right.is-vertical{align-items:flex-end}.wp-block-buttons.is-content-justification-space-between{justify-content:space-between}.wp-block-buttons.aligncenter{text-align:center}.wp-block-buttons:not(.is-content-justification-space-between,.is-content-justification-right,.is-content-justification-left,.is-content-justification-center) .wp-block-button.aligncenter{margin-left:auto;margin-right:auto;width:100%}.wp-block-buttons[style*=text-decoration] .wp-block-button,.wp-block-buttons[style*=text-decoration] .wp-block-button__link{text-decoration:inherit}.wp-block-buttons.has-custom-font-size .wp-block-button__link{font-size:inherit}.wp-block-buttons .wp-block-button__link{width:100%}.wp-block-button.aligncenter{text-align:center}
/*# sourceURL=https://www.bluecloverr.com/wp-includes/blocks/buttons/style.min.css */

/* === Extracted from: temp_live_site.html === */
.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}
/*# sourceURL=https://www.bluecloverr.com/wp-includes/blocks/paragraph/style.min.css */

/* === Extracted from: temp_live_site.html === */
.wp-block-post-content{display:flow-root}
/*# sourceURL=https://www.bluecloverr.com/wp-includes/blocks/post-content/style.min.css */

/* === Extracted from: temp_live_site.html === */
h1:where(.wp-block-heading).has-background,h2:where(.wp-block-heading).has-background,h3:where(.wp-block-heading).has-background,h4:where(.wp-block-heading).has-background,h5:where(.wp-block-heading).has-background,h6:where(.wp-block-heading).has-background{padding:1.25em 2.375em}h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h3.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h3.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h4.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h4.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h5.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h5.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h6.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]){rotate:180deg}
/*# sourceURL=https://www.bluecloverr.com/wp-includes/blocks/heading/style.min.css */

/* === Extracted from: temp_live_site.html === */
ol,ul{box-sizing:border-box}:root :where(.wp-block-list.has-background){padding:1.25em 2.375em}
/*# sourceURL=https://www.bluecloverr.com/wp-includes/blocks/list/style.min.css */

/* === Extracted from: temp_live_site.html === */
.wp-block-social-links{background:none;box-sizing:border-box;margin-left:0;padding-left:0;padding-right:0;text-indent:0}.wp-block-social-links .wp-social-link a,.wp-block-social-links .wp-social-link a:hover{border-bottom:0;box-shadow:none;text-decoration:none}.wp-block-social-links .wp-social-link svg{height:1em;width:1em}.wp-block-social-links .wp-social-link span:not(.screen-reader-text){font-size:.65em;margin-left:.5em;margin-right:.5em}.wp-block-social-links.has-small-icon-size{font-size:16px}.wp-block-social-links,.wp-block-social-links.has-normal-icon-size{font-size:24px}.wp-block-social-links.has-large-icon-size{font-size:36px}.wp-block-social-links.has-huge-icon-size{font-size:48px}.wp-block-social-links.aligncenter{display:flex;justify-content:center}.wp-block-social-links.alignright{justify-content:flex-end}.wp-block-social-link{border-radius:9999px;display:block}@media not (prefers-reduced-motion){.wp-block-social-link{transition:transform .1s ease}}.wp-block-social-link{height:auto}.wp-block-social-link a{align-items:center;display:flex;line-height:0}.wp-block-social-link:hover{transform:scale(1.1)}.wp-block-social-links .wp-block-social-link.wp-social-link{display:inline-block;margin:0;padding:0}.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor,.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg,.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:active,.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover,.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:visited{color:currentColor;fill:currentColor}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link{background-color:#f0f0f0;color:#444}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-amazon{background-color:#f90;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-bandcamp{background-color:#1ea0c3;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-behance{background-color:#0757fe;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-bluesky{background-color:#0a7aff;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-codepen{background-color:#1e1f26;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-deviantart{background-color:#02e49b;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-discord{background-color:#5865f2;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-dribbble{background-color:#e94c89;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-dropbox{background-color:#4280ff;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-etsy{background-color:#f45800;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-facebook{background-color:#0866ff;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-fivehundredpx{background-color:#000;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-flickr{background-color:#0461dd;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-foursquare{background-color:#e65678;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-github{background-color:#24292d;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-goodreads{background-color:#eceadd;color:#382110}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-google{background-color:#ea4434;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-gravatar{background-color:#1d4fc4;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-instagram{background-color:#f00075;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-lastfm{background-color:#e21b24;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-linkedin{background-color:#0d66c2;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-mastodon{background-color:#3288d4;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-medium{background-color:#000;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-meetup{background-color:#f6405f;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-patreon{background-color:#000;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-pinterest{background-color:#e60122;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-pocket{background-color:#ef4155;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-reddit{background-color:#ff4500;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-skype{background-color:#0478d7;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-snapchat{background-color:#fefc00;color:#fff;stroke:#000}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-soundcloud{background-color:#ff5600;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-spotify{background-color:#1bd760;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-telegram{background-color:#2aabee;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-threads{background-color:#000;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-tiktok{background-color:#000;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-tumblr{background-color:#011835;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-twitch{background-color:#6440a4;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-twitter{background-color:#1da1f2;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-vimeo{background-color:#1eb7ea;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-vk{background-color:#4680c2;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-wordpress{background-color:#3499cd;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-whatsapp{background-color:#25d366;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-x{background-color:#000;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-yelp{background-color:#d32422;color:#fff}:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-youtube{background-color:red;color:#fff}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link{background:none}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link svg{height:1.25em;width:1.25em}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-amazon{color:#f90}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-bandcamp{color:#1ea0c3}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-behance{color:#0757fe}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-bluesky{color:#0a7aff}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-codepen{color:#1e1f26}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-deviantart{color:#02e49b}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-discord{color:#5865f2}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-dribbble{color:#e94c89}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-dropbox{color:#4280ff}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-etsy{color:#f45800}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-facebook{color:#0866ff}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-fivehundredpx{color:#000}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-flickr{color:#0461dd}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-foursquare{color:#e65678}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-github{color:#24292d}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-goodreads{color:#382110}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-google{color:#ea4434}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-gravatar{color:#1d4fc4}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-instagram{color:#f00075}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-lastfm{color:#e21b24}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-linkedin{color:#0d66c2}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-mastodon{color:#3288d4}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-medium{color:#000}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-meetup{color:#f6405f}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-patreon{color:#000}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-pinterest{color:#e60122}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-pocket{color:#ef4155}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-reddit{color:#ff4500}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-skype{color:#0478d7}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-snapchat{color:#fff;stroke:#000}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-soundcloud{color:#ff5600}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-spotify{color:#1bd760}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-telegram{color:#2aabee}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-threads{color:#000}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-tiktok{color:#000}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-tumblr{color:#011835}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-twitch{color:#6440a4}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-twitter{color:#1da1f2}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-vimeo{color:#1eb7ea}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-vk{color:#4680c2}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-whatsapp{color:#25d366}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-wordpress{color:#3499cd}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-x{color:#000}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-yelp{color:#d32422}:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-youtube{color:red}.wp-block-social-links.is-style-pill-shape .wp-social-link{width:auto}:root :where(.wp-block-social-links .wp-social-link a){padding:.25em}:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link a){padding:0}:root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link a){padding-left:.6666666667em;padding-right:.6666666667em}.wp-block-social-links:not(.has-icon-color):not(.has-icon-background-color) .wp-social-link-snapchat .wp-block-social-link-label{color:#000}
/*# sourceURL=https://www.bluecloverr.com/wp-includes/blocks/social-links/style.min.css */

/* === Extracted from: temp_live_site.html === */
.wp-block-columns{box-sizing:border-box;display:flex;flex-wrap:wrap!important}@media (min-width:782px){.wp-block-columns{flex-wrap:nowrap!important}}.wp-block-columns{align-items:normal!important}.wp-block-columns.are-vertically-aligned-top{align-items:flex-start}.wp-block-columns.are-vertically-aligned-center{align-items:center}.wp-block-columns.are-vertically-aligned-bottom{align-items:flex-end}@media (max-width:781px){.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:100%!important}}@media (min-width:782px){.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:0;flex-grow:1}.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis]{flex-grow:0}}.wp-block-columns.is-not-stacked-on-mobile{flex-wrap:nowrap!important}.wp-block-columns.is-not-stacked-on-mobile>.wp-block-column{flex-basis:0;flex-grow:1}.wp-block-columns.is-not-stacked-on-mobile>.wp-block-column[style*=flex-basis]{flex-grow:0}:where(.wp-block-columns){margin-bottom:1.75em}:where(.wp-block-columns.has-background){padding:1.25em 2.375em}.wp-block-column{flex-grow:1;min-width:0;overflow-wrap:break-word;word-break:break-word}.wp-block-column.is-vertically-aligned-top{align-self:flex-start}.wp-block-column.is-vertically-aligned-center{align-self:center}.wp-block-column.is-vertically-aligned-bottom{align-self:flex-end}.wp-block-column.is-vertically-aligned-stretch{align-self:stretch}.wp-block-column.is-vertically-aligned-bottom,.wp-block-column.is-vertically-aligned-center,.wp-block-column.is-vertically-aligned-top{width:100%}
/*# sourceURL=https://www.bluecloverr.com/wp-includes/blocks/columns/style.min.css */

/* === Extracted from: temp_live_site.html === */
img.wp-smiley, img.emoji {
		display: inline !important;
		border: none !important;
		box-shadow: none !important;
		height: 1em !important;
		width: 1em !important;
		margin: 0 0.07em !important;
		vertical-align: -0.1em !important;
		background: none !important;
		padding: 0 !important;
	}
/*# sourceURL=wp-emoji-styles-inline-css */

/* === Extracted from: temp_live_site.html === */
:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}
/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */

/* === Extracted from: temp_live_site.html === */
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--primary: #2B7FBF;--wp--preset--color--secondary: #00B4D8;--wp--preset--color--accent: #7C3AED;--wp--preset--color--tertiary: #10B981;--wp--preset--color--background: #F8FAFC;--wp--preset--color--surface: #FFFFFF;--wp--preset--color--text-primary: #1E293B;--wp--preset--color--text-secondary: #64748B;--wp--preset--color--border: #E2E8F0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 0.875rem;--wp--preset--font-size--medium: 1rem;--wp--preset--font-size--large: 1.25rem;--wp--preset--font-size--x-large: 2rem;--wp--preset--font-size--xx-large: 3rem;--wp--preset--font-family--outfit: 'Outfit', sans-serif;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}:root { --wp--style--global--content-size: 1200px;--wp--style--global--wide-size: 1400px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 24px; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 24px; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 24px;}:root :where(.is-layout-grid){gap: 24px;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{background-color: var(--wp--preset--color--background);color: var(--wp--preset--color--text-primary);font-family: var(--wp--preset--font-family--outfit);font-size: var(--wp--preset--font-size--medium);line-height: 1.6;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}a:where(:not(.wp-element-button)){color: var(--wp--preset--color--primary);text-decoration: underline;}h1, h2, h3, h4, h5, h6{color: var(--wp--preset--color--text-primary);font-weight: 700;}:root :where(.wp-element-button, .wp-block-button__link){background-color: var(--wp--preset--color--primary);border-radius: 99px;border-width: 0;color: #FFFFFF;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: 600;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-primary-color{color: var(--wp--preset--color--primary) !important;}.has-secondary-color{color: var(--wp--preset--color--secondary) !important;}.has-accent-color{color: var(--wp--preset--color--accent) !important;}.has-tertiary-color{color: var(--wp--preset--color--tertiary) !important;}.has-background-color{color: var(--wp--preset--color--background) !important;}.has-surface-color{color: var(--wp--preset--color--surface) !important;}.has-text-primary-color{color: var(--wp--preset--color--text-primary) !important;}.has-text-secondary-color{color: var(--wp--preset--color--text-secondary) !important;}.has-border-color{color: var(--wp--preset--color--border) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-primary-background-color{background-color: var(--wp--preset--color--primary) !important;}.has-secondary-background-color{background-color: var(--wp--preset--color--secondary) !important;}.has-accent-background-color{background-color: var(--wp--preset--color--accent) !important;}.has-tertiary-background-color{background-color: var(--wp--preset--color--tertiary) !important;}.has-background-background-color{background-color: var(--wp--preset--color--background) !important;}.has-surface-background-color{background-color: var(--wp--preset--color--surface) !important;}.has-text-primary-background-color{background-color: var(--wp--preset--color--text-primary) !important;}.has-text-secondary-background-color{background-color: var(--wp--preset--color--text-secondary) !important;}.has-border-background-color{background-color: var(--wp--preset--color--border) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-primary-border-color{border-color: var(--wp--preset--color--primary) !important;}.has-secondary-border-color{border-color: var(--wp--preset--color--secondary) !important;}.has-accent-border-color{border-color: var(--wp--preset--color--accent) !important;}.has-tertiary-border-color{border-color: var(--wp--preset--color--tertiary) !important;}.has-background-border-color{border-color: var(--wp--preset--color--background) !important;}.has-surface-border-color{border-color: var(--wp--preset--color--surface) !important;}.has-text-primary-border-color{border-color: var(--wp--preset--color--text-primary) !important;}.has-text-secondary-border-color{border-color: var(--wp--preset--color--text-secondary) !important;}.has-border-border-color{border-color: var(--wp--preset--color--border) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-xx-large-font-size{font-size: var(--wp--preset--font-size--xx-large) !important;}.has-outfit-font-family{font-family: var(--wp--preset--font-family--outfit) !important;}
/*# sourceURL=global-styles-inline-css */

/* === Extracted from: temp_live_site.html === */
.wp-container-core-columns-is-layout-28f84493{flex-wrap:nowrap;}
/*# sourceURL=core-block-supports-inline-css */

/* === Extracted from: temp_live_site.html === */
.skip-link.screen-reader-text {
			border: 0;
			clip-path: inset(50%);
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute !important;
			width: 1px;
			word-wrap: normal !important;
		}

		.skip-link.screen-reader-text:focus {
			background-color: #eee;
			clip-path: none;
			color: #444;
			display: block;
			font-size: 1em;
			height: auto;
			left: 5px;
			line-height: normal;
			padding: 15px 23px 14px;
			text-decoration: none;
			top: 5px;
			width: auto;
			z-index: 100000;
		}
/*# sourceURL=wp-block-template-skip-link-inline-css */

/* === Extracted from: temp_live_site.html === */
.cookieadmin_remark, .cookieadmin_showmore { color: #1863dc !important; }input:checked+.cookieadmin_slider, input:disabled+.cookieadmin_slider { background-color: #3582C4 !important; }.cookieadmin_slider{ background-color: #808080 !important; }
/*# sourceURL=cookieadmin-style-inline-css */

/* === Extracted from: temp_live_site.html === */
.a{fill:#001d39}.b{fill:#985e23}

/* === Extracted from: temp_live_site.html === */
.a{fill:#001d39}.b{fill:#985e23}

/* === Extracted from: test-scroll-services.html === */
body {
            margin: 0;
            padding: 0;
        }

        .test-section {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            font-weight: bold;
        }

        .before {
            background: #e3f2fd;
        }

        .after {
            background: #f3e5f5;
        }