/*
========================================
Global Styles for AI Consulting Firm V2
========================================
*/

/* 1. Root Variables & Basic Setup */
:root {
    --primary-color: #0D47A1;       /* Deep Corporate Blue */
    --secondary-color: #1565C0;     /* Bright Supporting Blue */
    --accent-color: #FFC107;        /* Engaging Gold/Amber */
    --text-color-dark: #212529;      /* Primary Text */
    --text-color-light: #6c757d;    /* Secondary Text */
    --bg-color-light: #F8F9FA;      /* Main Background */
    --bg-color-medium: #e3f2fd;     /* Section Background */
    --card-bg: #FFFFFF;
    --success-color: #2E7D32;       /* For positive stats */
    --border-color: #dee2e6;
}

body.dark-mode {
    --primary-color: #90CAF9;
    --secondary-color: #64B5F6;
    --accent-color: #FFD54F;
    --success-color: #81C784;
    --text-color-dark: #E3F2FD;
    --text-color-light: #B0BEC5;
    --bg-color-light: #0B1526;
    --bg-color-medium: #13263E;
    --card-bg: #102133;
    --border-color: rgba(255, 255, 255, 0.08);
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-color-light);
    color: var(--text-color-dark);
    line-height: 1.7;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/* 2. Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--primary-color);
}

h1 { font-size: 3rem; margin-bottom: 1rem; }
h2 { font-size: 2.5rem; margin-bottom: 1rem; }
h3 { font-size: 2rem; }
p { color: var(--text-color-light); font-size: 1.1rem; }
.section-title { margin-bottom: 1rem; }
.section-subtitle { font-size: 1.2rem; color: var(--text-color-light); max-width: 700px; margin: 0 auto 40px auto; }
.highlight { color: var(--secondary-color); font-weight: 600; }

/* 3. Navigation */
nav {
    background-color: var(--card-bg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}
nav .nav-wrapper { padding: 0 10px; }
nav .brand-logo {
    color: var(--primary-color);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}
nav .brand-logo img { height: 34px; margin-right: 0; }
nav .brand-logo .brand-mark {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
nav .brand-logo .brand-name {
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}
nav .brand-logo .brand-tagline {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.22rem;
    color: var(--text-color-light);
}
nav ul a {
    color: var(--text-color-dark);
    transition: color 0.3s, background-color 0.3s;
    font-weight: 500;
    font-size: 0.95rem;
}
nav.site-nav ul li a {
    padding: 0 12px;
}
nav ul a:hover {
    background-color: rgba(13, 71, 161, 0.05);
    color: var(--secondary-color);
}
nav ul li.active a {
    background-color: rgba(13, 71, 161, 0.1);
    color: var(--primary-color);
    font-weight: 600;
}
.sidenav a { color: var(--text-color-dark); }
.sidenav-trigger { color: var(--primary-color); }
nav.site-nav .nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}
nav.site-nav .nav-links > li > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
}
nav.site-nav .nav-links > li > a.dropdown-trigger .material-icons {
    font-size: 18px;
    margin-left: 2px;
}
nav.site-nav .nav-links > li > a.btn.nav-contact {
    background: var(--primary-color);
    color: #fff;
    border-radius: 999px;
    padding: 0 18px;
    line-height: 32px;
    height: 36px;
    margin-left: 8px;
}
nav.site-nav .nav-links > li > a.btn.nav-contact:hover,
nav.site-nav .nav-links > li > a.btn.nav-contact:focus {
    background: var(--secondary-color);
    color: #fff;
}
nav.site-nav .nav-links > li > .nav-theme-toggle {
    border: none;
    background: transparent;
    color: var(--text-color-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.3s, background-color 0.3s;
}
nav.site-nav .nav-links > li > .nav-theme-toggle .material-icons {
    font-size: 20px;
    line-height: 36px;
}
nav.site-nav .nav-links > li > .nav-theme-toggle:hover,
nav.site-nav .nav-links > li > .nav-theme-toggle:focus-visible {
    background-color: rgba(13, 71, 161, 0.08);
    outline: none;
}
.dropdown-content {
    border-radius: 8px;
    overflow: hidden;
    min-width: 220px;
}
.dropdown-content li > a {
    color: var(--text-color-dark);
    padding: 12px 16px;
    font-weight: 500;
}
.dropdown-content li > a:hover {
    background-color: rgba(13, 71, 161, 0.08);
    color: var(--primary-color);
}
.sidenav .sidenav-subheading {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary-color);
    padding: 12px 16px 6px;
    letter-spacing: 0.08em;
}
.sidenav .sidenav-divider {
    height: 1px;
    margin: 8px 16px;
    background: rgba(0,0,0,0.1);
}
.sidenav .nav-contact-mobile {
    display: block;
    margin: 12px 16px 20px;
    border-radius: 999px;
    background: var(--primary-color);
}
.sidenav .theme-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-color-dark);
}
.sidenav .theme-toggle .material-icons {
    font-size: 20px;
}
.sidenav .nav-contact-mobile:hover {
    background: var(--secondary-color);
}

/* 4. Hero Sections */
.hero {
    background-size: cover;
    background-position: center;
    color: #fff;
    position: relative;
    padding: 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
}
.hero .overlay {
    background: linear-gradient(45deg, rgba(13, 71, 161, 0.8), rgba(21, 101, 192, 0.7));
    position: absolute;
    top: 0; left: 0; height: 100%; width: 100%;
}
.hero .hero-content { position: relative; }
.hero h1 { color: #fff; text-shadow: 1px 1px 5px rgba(0,0,0,0.3); }
.hero p { color: rgba(255, 255, 255, 0.9); font-size: 1.3rem; font-weight: 300; }

/* 5. Components */
.btn, .btn-large, .btn-flat { border-radius: 8px; font-weight: 600; text-transform: none; letter-spacing: 0.5px; }
.btn-accent, .btn-large.btn-accent { background-color: var(--accent-color); color: var(--text-color-dark); }
.btn-accent:hover, .btn-large.btn-accent:hover { background-color: #ffca28; }
.btn-primary, .btn-large.btn-primary { background-color: var(--primary-color); color: #fff; }
.btn-primary:hover, .btn-large.btn-primary:hover { background-color: var(--secondary-color); }

.card {
    background-color: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s, transform 0.3s;
    border: 1px solid var(--border-color);
    height: 100%;
}
.card:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}
.card .card-image img { border-radius: 12px 12px 0 0; }
.card .card-content { display: flex; flex-direction: column; flex-grow: 1; }
.card .card-content h5 { margin-top: 0; }
.card .card-action {
    background-color: transparent;
    border-top: 1px solid var(--border-color) !important;
    border-radius: 0 0 12px 12px;
}
.card .card-action a { font-weight: 600; color: var(--secondary-color) !important; text-transform: none; }

.input-field input:focus + label,
.input-field textarea:focus + label { color: var(--primary-color) !important; }
.input-field input:focus,
.input-field textarea:focus { border-bottom: 1px solid var(--primary-color) !important; box-shadow: 0 1px 0 0 var(--primary-color) !important; }
.dropdown-content li > a, .dropdown-content li > span { color: var(--primary-color); }

.timeline { position: relative; padding: 40px 0; }
.timeline::before { content: ''; position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: var(--secondary-color); transform: translateX(-50%); }
.timeline-item { position: relative; width: 50%; padding: 20px 40px; box-sizing: border-box; }
.timeline-item:nth-child(odd) { left: 0; }
.timeline-item:nth-child(even) { left: 50%; }
.timeline-item .icon { position: absolute; top: 20px; right: -30px; z-index: 1; background: var(--accent-color); color: var(--primary-color); width: 60px; height: 60px; line-height: 60px; text-align: center; border-radius: 50%; font-size: 30px; border: 4px solid var(--bg-color-medium); }
.timeline-item:nth-child(even) .icon { left: -30px; }
.timeline-content { background: var(--card-bg); padding: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.collapsible { border: none; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.collapsible-header { font-weight: 600; border-bottom: 1px solid var(--border-color); background-color: #fff; }
.collapsible-header i { color: var(--primary-color); }
.collapsible-body { background-color: #fdfdfd; border-bottom: 1px solid var(--border-color); }

/* 6. Section Specific Styling */
.section { padding: 80px 0; }
.section-light { background-color: var(--bg-color-light); }
.section-medium { background-color: var(--bg-color-medium); }

.offer-banner {
    background: linear-gradient(90deg, var(--accent-color), #ffd54f);
    color: var(--text-color-dark);
    padding: 25px;
    border-radius: 12px;
    margin: -40px auto 40px auto;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    position: relative;
    z-index: 10;
    max-width: 90%;
}
.offer-banner h5 { color: var(--text-color-dark); margin: 0; font-weight: 700; }

.client-logos {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
    height: 40px;
}
.client-logos:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.icon-block { text-align: center; }
.icon-block .icon { font-size: 4rem; color: var(--primary-color); background: var(--bg-color-medium); border-radius: 50%; width: 100px; height: 100px; line-height: 100px; margin: 0 auto 20px auto; display: block; }

.pricing-card { border: 2px solid var(--border-color); text-align: center; }
.pricing-card.featured { border: 2px solid var(--primary-color); transform: scale(1.05); z-index: 5; }
.pricing-card .card-content { padding: 40px 20px; }
.pricing-card h3 { font-size: 1.5rem; color: var(--text-color-light); text-transform: uppercase; }
.pricing-card .price { font-size: 2rem; font-weight: 700; color: var(--primary-color); margin: 10px 0; }
.pricing-card .price-note { font-style: italic; color: var(--text-color-light); }
.pricing-card ul { list-style-type: none; margin: 20px 0; padding: 0; }
.pricing-card ul li { margin-bottom: 10px; }
.pricing-card ul li .material-icons { color: var(--success-color); vertical-align: middle; margin-right: 5px; }
.featured-badge { background-color: var(--primary-color); color: white; padding: 5px 20px; font-weight: 600; border-radius: 20px; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); }

.roi-calculator { background: linear-gradient(135deg, var(--bg-color-medium), #bbdefb); padding: 40px; border-radius: 12px; }

/* 7. Footer */
footer.page-footer { background-color: var(--primary-color); padding-top: 40px; }
footer h5 { color: #fff; }
footer p, footer li a { color: rgba(255, 255, 255, 0.7); }
footer .footer-links {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
footer .footer-links a { display: block; margin-bottom: 10px; transition: color 0.3s; }
footer .footer-links a:hover { color: var(--accent-color); }
footer .footer-links.two-column {
    column-count: 2;
    column-gap: 24px;
}
footer .footer-links.two-column li {
    break-inside: avoid;
}
.footer-copyright { background-color: rgba(0,0,0,0.1); color: rgba(255, 255, 255, 0.7); }

/* 8. Dark Mode Overrides */
body.dark-mode {
    color-scheme: dark;
}
body.dark-mode nav {
    box-shadow: 0 2px 18px rgba(5, 12, 22, 0.6);
}
body.dark-mode nav ul a:hover {
    background-color: rgba(144, 202, 249, 0.12);
    color: var(--primary-color);
}
body.dark-mode nav ul li.active a {
    background-color: rgba(144, 202, 249, 0.25);
    color: var(--primary-color);
}
body.dark-mode nav.site-nav .nav-links > li > .nav-theme-toggle:hover,
body.dark-mode nav.site-nav .nav-links > li > .nav-theme-toggle:focus-visible {
    background-color: rgba(144, 202, 249, 0.18);
}
body.dark-mode .dropdown-content {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}
body.dark-mode .dropdown-content li > a {
    color: var(--text-color-dark);
}
body.dark-mode .dropdown-content li > a:hover {
    background-color: rgba(144, 202, 249, 0.12);
}
body.dark-mode .sidenav {
    background-color: var(--card-bg);
}
body.dark-mode .sidenav a {
    color: var(--text-color-dark);
}
body.dark-mode .sidenav .sidenav-divider {
    background: rgba(255,255,255,0.08);
}
body.dark-mode .sidenav .theme-toggle {
    color: var(--text-color-dark);
}
body.dark-mode nav.site-nav .nav-links > li > a.btn.nav-contact,
body.dark-mode .sidenav .nav-contact-mobile {
    background: #0D47A1;
}
body.dark-mode nav.site-nav .nav-links > li > a.btn.nav-contact:hover,
body.dark-mode nav.site-nav .nav-links > li > a.btn.nav-contact:focus,
body.dark-mode .sidenav .nav-contact-mobile:hover {
    background: #1565C0;
}
body.dark-mode .collection .collection-item {
    background-color: rgba(255,255,255,0.03);
    border-bottom-color: rgba(255,255,255,0.08);
    color: var(--text-color-dark);
}
body.dark-mode .collection .collection-item .secondary-content {
    color: var(--text-color-light);
}
body.dark-mode .card,
body.dark-mode .card-panel,
body.dark-mode .cta,
body.dark-mode .timeline,
body.dark-mode .model,
body.dark-mode .panel,
body.dark-mode .controls,
body.dark-mode .stat-card,
body.dark-mode .image-card,
body.dark-mode .roi-workbench,
body.dark-mode .dashboard .cardx {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}
body.dark-mode .modal {
    background-color: var(--card-bg);
    color: var(--text-color-dark);
}
body.dark-mode footer.page-footer {
    background-color: #0D47A1;
}
body.dark-mode .input-field label {
    color: var(--text-color-light);
}
body.dark-mode .input-field input,
body.dark-mode .input-field textarea,
body.dark-mode .select-wrapper input.select-dropdown,
body.dark-mode .input-field select,
body.dark-mode .materialize-textarea {
    color: var(--text-color-dark);
    background-color: rgba(8, 20, 35, 0.65);
    border-bottom: 1px solid rgba(144, 202, 249, 0.35);
}
body.dark-mode .input-field input::placeholder,
body.dark-mode .input-field textarea::placeholder,
body.dark-mode .select-wrapper input.select-dropdown::placeholder {
    color: rgba(227, 242, 253, 0.6);
}
body.dark-mode .input-field input:focus,
body.dark-mode .input-field textarea:focus,
body.dark-mode .select-wrapper input.select-dropdown:focus,
body.dark-mode .input-field select:focus {
    border-bottom: 1px solid var(--primary-color) !important;
    box-shadow: 0 1px 0 0 var(--primary-color) !important;
}
body.dark-mode .input-field input:focus + label,
body.dark-mode .input-field textarea:focus + label {
    color: var(--primary-color) !important;
}
body.dark-mode .select-wrapper .dropdown-content {
    background-color: rgba(8, 20, 35, 0.92);
    border: 1px solid rgba(144, 202, 249, 0.2);
}
body.dark-mode .select-wrapper .dropdown-content li > span {
    color: var(--text-color-dark);
}
body.dark-mode .helper-text,
body.dark-mode .prefix {
    color: var(--text-color-light);
}
body.dark-mode .roi-workbench label {
    color: var(--text-color-dark);
}
body.dark-mode .roi-workbench input[type="number"] {
    background: rgba(8, 20, 35, 0.65);
    border: 1px solid rgba(144, 202, 249, 0.35);
    color: var(--text-color-dark);
}
body.dark-mode .roi-workbench input[type="number"]::placeholder {
    color: rgba(227, 242, 253, 0.65);
}
body.dark-mode .roi-workbench .slider-value {
    color: var(--text-color-light);
}
body.dark-mode .metric-chip {
    background: rgba(144, 202, 249, 0.08);
    color: var(--text-color-dark);
    border: 1px solid rgba(144, 202, 249, 0.2);
}
body.dark-mode .metric-chip span:last-child {
    color: var(--accent-color);
}
body.dark-mode .metric-chip--hero {
    background: rgba(13, 71, 161, 0.28) !important;
    color: var(--text-color-dark);
}
body.dark-mode .metric-chip--hero span:last-child {
    color: var(--accent-color) !important;
}
body.dark-mode .flowchart .node {
    fill: rgba(8, 20, 35, 0.85);
    stroke: rgba(144, 202, 249, 0.35);
}
body.dark-mode .flowchart .node--accent {
    fill: rgba(13, 71, 161, 0.32);
}
body.dark-mode .flowchart text,
body.dark-mode .flowchart .label {
    fill: var(--text-color-dark);
}
body.dark-mode .flowchart-legend span {
    color: var(--text-color-dark);
}
body.dark-mode .pill {
    background: rgba(144, 202, 249, 0.08);
    border-color: rgba(144, 202, 249, 0.25);
    color: var(--text-color-dark);
}
body.dark-mode .pill.ok {
    background: rgba(129, 199, 132, 0.18);
    border-color: rgba(129, 199, 132, 0.35);
    color: #B9F6CA;
}
body.dark-mode .pill.warn {
    background: rgba(255, 213, 79, 0.2);
    border-color: rgba(255, 213, 79, 0.4);
    color: #FFE082;
}
body.dark-mode .pill.flag {
    background: rgba(229, 115, 115, 0.18);
    border-color: rgba(229, 115, 115, 0.35);
    color: #FFCDD2;
}
body.dark-mode .chip {
    background: rgba(144, 202, 249, 0.08);
    border-color: rgba(144, 202, 249, 0.25);
    color: var(--text-color-dark);
}
body.dark-mode .chip.ok {
    background: rgba(129, 199, 132, 0.2);
    border-color: rgba(129, 199, 132, 0.35);
    color: #C8E6C9;
}
body.dark-mode .chip.warn {
    background: rgba(255, 213, 79, 0.25);
    border-color: rgba(255, 213, 79, 0.4);
    color: #FFE082;
}
body.dark-mode .chip.flag {
    background: rgba(229, 115, 115, 0.25);
    border-color: rgba(229, 115, 115, 0.4);
    color: #FFCDD2;
}
body.dark-mode .btnx.ghost {
    background: rgba(13, 71, 161, 0.15) !important;
    color: var(--text-color-dark) !important;
    border-color: rgba(144, 202, 249, 0.35) !important;
}
body.dark-mode .btnx.alt,
body.dark-mode .btnp,
body.dark-mode .btnp.secondary {
    box-shadow: 0 8px 18px rgba(13, 71, 161, 0.35);
}
body.dark-mode .stat-card h3,
body.dark-mode .image-card h3,
body.dark-mode .controls h3,
body.dark-mode .controls label,
body.dark-mode .cta h2 {
    color: var(--text-color-dark);
}
body.dark-mode .stat-card p,
body.dark-mode .image-card p,
body.dark-mode .cta p,
body.dark-mode .val-row,
body.dark-mode .desc,
body.dark-mode .small {
    color: var(--text-color-light);
}
body.dark-mode .collapsible-header {
    background-color: rgba(8, 20, 35, 0.75);
    color: var(--text-color-dark);
    border-bottom: 1px solid var(--border-color);
}
body.dark-mode .collapsible-body {
    background-color: var(--card-bg);
    color: var(--text-color-dark);
    border-bottom: 1px solid var(--border-color);
}
body.dark-mode .collapsible-body p {
    color: var(--text-color-light);
}
body.dark-mode .sim-toolbar .btn-mini {
    background: rgba(144, 202, 249, 0.1) !important;
    border-color: rgba(144, 202, 249, 0.35) !important;
    color: var(--text-color-dark) !important;
}
body.dark-mode .sim-toolbar .btn-mini.active {
    background: rgba(144, 202, 249, 0.22) !important;
}
body.dark-mode .page-hero,
body.dark-mode header.page-hero {
    background: linear-gradient(135deg, #081322 0%, #13263E 100%) !important;
    color: var(--text-color-dark) !important;
}
body.dark-mode header.page-hero::before {
    background: radial-gradient(circle at top left, rgba(144, 202, 249, 0.2), transparent),
        radial-gradient(circle at bottom right, rgba(21, 101, 192, 0.3), transparent);
    opacity: 1;
}
body.dark-mode .stat-value,
body.dark-mode .stat {
    color: var(--accent-color);
}

/* Automation ROI page */
body.automation-page {
    background: linear-gradient(135deg, rgba(13, 71, 161, 0.08), rgba(21, 101, 192, 0.08));
    color: var(--text-color-dark);
}
body.automation-page.dark-mode {
    background: linear-gradient(135deg, rgba(2, 6, 23, 0.92), rgba(13, 34, 58, 0.94));
}
body.automation-page main.container {
    max-width: 1100px;
}
body.automation-page .page-hero {
    background: linear-gradient(135deg, rgba(13, 71, 161, 0.92), rgba(21, 101, 192, 0.9));
    color: #fff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(13, 71, 161, 0.12);
    margin: 24px 0;
    position: relative;
    overflow: hidden;
}
body.automation-page .page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}
body.automation-page .page-hero h1 {
    font-size: 2rem;
    margin-bottom: 6px;
    color: #fff;
}
body.automation-page .page-hero p {
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 0;
}
body.automation-page.dark-mode .page-hero {
    background: linear-gradient(135deg, rgba(6, 25, 46, 0.95), rgba(9, 38, 70, 0.92));
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
}
body.automation-page .cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
body.automation-page .btnx {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--secondary-color);
    color: #fff;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(13, 71, 161, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.automation-page .btnx:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 36px rgba(13, 71, 161, 0.18);
}
body.automation-page .btnx.alt {
    background: var(--accent-color);
    color: var(--text-color-dark);
}
body.automation-page .btnx.ghost {
    background: #fff;
    color: var(--primary-color);
    border: 1px solid rgba(13, 71, 161, 0.25);
    box-shadow: none;
}
body.automation-page .dash {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 24px 0;
}
body.automation-page .cardx {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(13, 71, 161, 0.12);
    padding: 18px;
}
body.automation-page.dark-mode .cardx {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
}
body.automation-page .cardx h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
}
body.automation-page .stat {
    font-size: 1.85rem;
    color: var(--secondary-color);
    margin-top: 6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
body.automation-page .desc {
    font-size: 0.92rem;
    color: var(--text-color-light);
    margin-top: 6px;
}
body.automation-page .controls {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 32px rgba(13, 71, 161, 0.12);
    padding: 22px;
    margin: 28px 0;
}
body.automation-page .ctrl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
body.automation-page .ctrl {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.automation-page .ctrl label {
    font-size: 0.9rem;
    color: var(--text-color-dark);
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
body.automation-page .val {
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}
body.automation-page .panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 32px rgba(13, 71, 161, 0.12);
    padding: 20px;
    margin-bottom: 24px;
}
body.automation-page .mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
body.automation-page .toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--card-bg);
}
body.automation-page .pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    border: 1px solid var(--border-color);
    background: rgba(21, 101, 192, 0.08);
    color: var(--primary-color);
}
body.automation-page.dark-mode .pill {
    background: rgba(144, 202, 249, 0.14);
}
body.automation-page .small {
    font-size: 0.85rem;
    color: var(--text-color-light);
}
body.automation-page .subhead {
    margin: 0.5rem 0 0.25rem;
    font-weight: 600;
    color: var(--text-color-dark);
}
body.automation-page .legend {
    font-size: 0.85rem;
    color: var(--text-color-light);
    display: flex;
    gap: 12px;
    margin-top: 6px;
}
body.automation-page .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: var(--secondary-color);
    opacity: 0.6;
}
body.automation-page .activity-float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 340px;
    max-width: 92vw;
    z-index: 40;
    pointer-events: none;
}
body.automation-page .lane {
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    padding: 12px;
    box-shadow: 0 12px 30px rgba(13, 71, 161, 0.14);
    pointer-events: auto;
}
body.automation-page.dark-mode .lane {
    background: rgba(16, 33, 51, 0.92);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
body.automation-page .lane-title {
    font-size: 0.9rem;
    color: var(--text-color-light);
    margin-bottom: 6px;
}
body.automation-page .lane-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 48vh;
    overflow: hidden;
}
body.automation-page .row-ev {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
    box-shadow: 0 8px 20px rgba(13, 71, 161, 0.12);
    opacity: 0;
    transform: translateY(8px);
    animation: automation-event 9s ease-out forwards;
}
body.automation-page.dark-mode .row-ev {
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.46);
}
body.automation-page .badge {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(21, 101, 192, 0.12);
    color: var(--primary-color);
    font-size: 1rem;
}
body.automation-page.dark-mode .badge {
    background: rgba(144, 202, 249, 0.18);
    color: var(--text-color-dark);
}
body.automation-page .row-ev .meta {
    font-size: 0.85rem;
    color: var(--text-color-light);
    margin-left: auto;
}
@keyframes automation-event {
    0% { opacity: 0; transform: translateY(8px); }
    12% { opacity: 1; transform: translateY(0); }
    82% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-8px); }
}

/* Media Queries */
@media (max-width: 992px) { .hero { min-height: 50vh; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } }
@media (max-width: 768px) { .timeline::before { left: 30px; } .timeline-item { width: 100%; padding-left: 70px; padding-right: 20px; } .timeline-item:nth-child(even) { left: 0; } .timeline-item .icon { left: 0; } .pricing-card.featured { transform: scale(1); } .pricing-card { margin-bottom: 20px; } }
@media (max-width: 600px) {
    .section { padding: 60px 0; }
    .hero p { font-size: 1.1rem; }
    nav .brand-logo img { height: 30px; }
    nav .brand-logo .brand-tagline { display: none; }
    nav.site-nav .nav-links > li > a { padding: 0 8px; }
    .offer-banner { max-width: 100%; border-radius: 0; margin-top: 0; }
}

/* 9. Blog Styling */
.blog-card { display: flex; flex-direction: column; }
.blog-post-meta { color: var(--text-color-light); margin-bottom: 2rem; }
.blog-post-content h5 { font-weight: 600; color: var(--secondary-color); }
.blog-post-content blockquote { border-left: 5px solid var(--primary-color); }
.blog-post-author { display: flex; align-items: center; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-color); }
.blog-post-author img { width: 80px; height: 80px; margin-right: 20px; }

/* 10. Technology Page Styling */
.tech-logo-grid { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center; }
.tech-logo-item { text-align: center; }
.tech-logo-item img { height: 60px; max-width: 150px; filter: grayscale(100%); opacity: 0.8; transition: all 0.3s ease; }
.tech-logo-item:hover img { filter: grayscale(0%); opacity: 1; }
.tech-logo-item p { margin-top: 0.5rem; font-weight: 500; color: var(--text-color-dark); }

/* 11. Careers Page Styling */
.job-listing { border: 1px solid var(--border-color); border-radius: 12px; padding: 2rem; margin-bottom: 1.5rem; transition: all 0.3s ease; background: var(--card-bg); }
.job-listing:hover { border-color: var(--primary-color); box-shadow: 0 8px 16px rgba(0,0,0,0.08); }
.job-meta { display: flex; gap: 1.5rem; color: var(--text-color-light); margin-top: 0.5rem; }
.job-meta span { display: flex; align-items: center; }
.job-meta i { margin-right: 0.5rem; }

/* 12. Animated Stats */
.stat-item { text-align: center; }
.stat-number { font-size: 3.5rem; font-weight: 700; color: var(--primary-color); }
.stat-label { font-size: 1.1rem; color: var(--text-color-light); }

/*
========================================
CSS Additions for Enhanced Case Studies
========================================
*/

/* Custom colors for Case Study sections - feel free to adjust these hex codes */
:root {
    --challenge-color: #c62828; /* Deep Red for challenges */
    --strategy-color: #1565c0;  /* Deep Blue for strategy */
    --value-color: #2e7d32;    /* Deep Green for value delivered */
}

.challenge-heading {
    color: var(--challenge-color);
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 1.15rem; /* Slightly larger for emphasis */
}

.strategy-heading {
    color: var(--strategy-color);
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 1.15rem;
}

.value-heading {
    color: var(--value-color);
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 1.15rem;
}

/* Ensure consistent paragraph spacing within cards */
.card-content p {
    margin-bottom: 10px;
    line-height: 1.6;
}

/*
========================================
CSS Additions for Flexbox Grid Alignment
========================================
*/

/* This utility class turns a standard row into a flex container */
.row.flex-row {
    display: flex;
    flex-wrap: wrap;
}/*
========================================
Interactive Upgrades 2025
========================================
*/
.typed-highlight {
    display: inline-block;
    min-width: 10ch;
    min-height: 1.2em;
    color: var(--accent-color);
    font-weight: 700;
    position: relative;
}
.typed-highlight::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 0;
    width: 2px;
    height: 100%;
    background: currentColor;
    animation: blinkCursor 1.1s steps(2) infinite;
}
@keyframes blinkCursor {
    0%, 50% { opacity: 1; }
    60%, 100% { opacity: 0; }
}

.roi-workbench {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(13, 71, 161, 0.12);
    border: 1px solid rgba(13, 71, 161, 0.08);
    padding: 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.roi-workbench--ready {
    opacity: 1;
}
.roi-workbench .workbench-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px 20px;
}
.roi-workbench label {
    font-weight: 600;
    color: var(--text-color-dark);
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
}
.roi-workbench input[type="number"] {
    border-radius: 10px;
    border: 1px solid var(--border-color);
    padding: 10px 14px;
    font-size: 0.95rem;
    background: #fff;
}
.roi-workbench input[type="number"]:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(13, 71, 161, 0.15);
}
.roi-workbench input[type="range"] {
    accent-color: var(--primary-color);
}
.roi-workbench .slider-value {
    font-size: 0.85rem;
    color: var(--text-color-light);
    margin-top: 6px;
}
.workbench-outcomes {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.roi-insights {
    display: grid;
    gap: 12px;
}
.roi-insights .metric-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-color-medium);
    border-radius: 12px;
    padding: 14px 18px;
    font-weight: 600;
}
.roi-insights .metric-chip span:last-child {
    color: var(--primary-color);
}
.roi-progress {
    display: grid;
    gap: 10px;
}
.roi-progress .label-row {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: var(--text-color-dark);
}
.roi-progress .progress-rail {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(13, 71, 161, 0.14);
    overflow: hidden;
}
.roi-progress .progress-bar {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(120deg, var(--secondary-color), #00c2ff);
    transition: width 0.4s ease;
}
.roi-breakdown {
    list-style: none;
    padding: 0;
    margin: 0;
}
.roi-breakdown li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(13, 71, 161, 0.15);
    font-size: 0.95rem;
}
.roi-breakdown li:last-child {
    border-bottom: none;
}
.workbench-chart {
    min-height: 260px;
    position: relative;
}
.workbench-chart canvas {
    width: 100%;
    height: 260px !important;
}

.pipeline-simulator {
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid rgba(13, 71, 161, 0.08);
    box-shadow: 0 24px 44px rgba(13, 71, 161, 0.12);
    padding: 32px;
}
.pipeline-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
}
.pipeline-controls input[type="range"] {
    flex: 1;
    accent-color: var(--primary-color);
}
.pipeline-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.pipeline-metrics .metric-chip {
    background: var(--bg-color-medium);
    border-radius: 12px;
    padding: 12px 16px;
}
.pipeline-actions {
    margin: 12px 0 0 0;
    padding-left: 20px;
}
.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(13, 71, 161, 0.12);
    color: var(--primary-color);
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 600;
    font-size: 0.85rem;
}

.scenario-hub {
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid rgba(13, 71, 161, 0.08);
    box-shadow: 0 24px 44px rgba(13, 71, 161, 0.1);
    padding: 32px;
}
.scenario-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.scenario-tabs button {
    border: 1px solid var(--border-color);
    background: transparent;
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 600;
    color: var(--text-color-dark);
    transition: all 0.25s ease;
}
.scenario-tabs button.is-active {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 12px 24px rgba(13, 71, 161, 0.25);
    border-color: var(--primary-color);
}
.scenario-panel {
    display: none;
    animation: fadeScenario 0.35s ease;
}
.scenario-panel.is-active {
    display: block;
}
@keyframes fadeScenario {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.trend-card {
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid rgba(13, 71, 161, 0.08);
    box-shadow: 0 18px 36px rgba(13, 71, 161, 0.1);
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.trend-card .chart-wrapper {
    position: relative;
    flex-grow: 1;
    min-height: 220px;
}
.trend-card small {
    color: var(--text-color-light);
}

.metric-stack {
    display: grid;
    gap: 12px;
}
.metric-stack .metric-chip {
    justify-content: space-between;
}

@media (max-width: 992px) {
    .roi-workbench {
        grid-template-columns: 1fr;
    }
    .pipeline-controls {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 600px) {
    .roi-workbench {
        padding: 24px;
    }
    .scenario-hub {
        padding: 24px;
    }
    .pipeline-simulator {
        padding: 24px;
    }
}
.metric-chip--hero {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff;
}
.metric-chip--hero span:last-child {
    color: #fff !important;
}
.metric-chip--hero i {
    margin-right: 6px;
}
.card-panel .collection {
    border: none;
    margin: 16px 0 0;
    box-shadow: none;
}
.card-panel .collection .collection-item {
    border-bottom: 1px dashed rgba(13, 71, 161, 0.18);
    background: transparent;
}
.card-panel .collection .collection-item:last-child {
    border-bottom: none;
}
.storyboard-grid {
    display: flex;
    gap: 24px;
    align-items: stretch;
}
.storyboard-nav {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.storyboard-nav button {
    justify-content: flex-start;
    text-align: left;
    border: 1px solid rgba(13, 71, 161, 0.18);
    border-radius: 40px;
    padding: 12px 18px;
    font-weight: 600;
    color: var(--text-color-dark);
    transition: all 0.25s ease;
}
.storyboard-nav button.is-active {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 12px 28px rgba(13, 71, 161, 0.2);
}
.storyboard-content {
    flex: 1;
    display: flex;
}
.storyboard-panel {
    display: none;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    animation: fadeScenario 0.35s ease;
}
.storyboard-panel.is-active {
    display: flex;
}
.story-deck {
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid rgba(13, 71, 161, 0.1);
    box-shadow: 0 24px 44px rgba(13, 71, 161, 0.12);
    padding: 28px;
}
.story-deck-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.story-deck-tabs .btn-flat {
    border-radius: 999px;
    border: 1px solid rgba(13, 71, 161, 0.2);
    font-weight: 600;
    color: var(--text-color-dark);
    transition: all 0.2s ease;
}
.story-deck-tabs .btn-flat.is-active,
.story-deck-tabs .btn-flat:hover {
    background: var(--secondary-color);
    color: #fff;
    border-color: var(--secondary-color);
}
.story-deck-panel {
    display: none;
}
.story-deck-panel.is-active {
    display: block;
}
.story-deck-panel h5 {
    margin-top: 0;
}
.story-insights {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.insight-card {
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid rgba(13, 71, 161, 0.1);
    padding: 18px;
    box-shadow: 0 14px 30px rgba(13, 71, 161, 0.08);
}
.insight-card h6 {
    margin-top: 0;
    font-weight: 600;
}
@media (max-width: 992px) {
    .storyboard-grid {
        flex-direction: column;
    }
    .storyboard-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .storyboard-nav button {
        flex: 1 1 200px;
        text-align: center;
        justify-content: center;
    }
}
@media (max-width: 600px) {
    .story-deck {
        padding: 20px;
    }
    .story-deck-tabs {
        flex-direction: column;
    }
    .storyboard-nav button {
        font-size: 0.95rem;
    }
}
.card .collection {
    border: none;
    margin: 12px 0 0;
    box-shadow: none;
}
.card .collection .collection-item {
    border-bottom: 1px dashed rgba(13, 71, 161, 0.18);
    padding: 8px 0;
}
.card .collection .collection-item:last-child {
    border-bottom: none;
}
.disclaimer-banner {
    background: rgba(13, 71, 161, 0.08);
    border-left: 4px solid var(--primary-color);
    padding: 12px 20px;
    border-radius: 10px;
    margin: 20px auto;
    color: var(--text-color-dark);
    font-size: 0.95rem;
}
.flowchart-wrapper {
    margin: 40px auto;
    max-width: 980px;
}
.flowchart {
    width: 100%;
    height: auto;
}
.flowchart text {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    fill: var(--text-color-dark);
}
.flowchart .node {
    fill: #ffffff;
    stroke: rgba(13, 71, 161, 0.25);
    stroke-width: 2;
    filter: drop-shadow(0 12px 20px rgba(13, 71, 161, 0.12));
}
.flowchart .node--accent {
    fill: rgba(21, 101, 192, 0.12);
}
.flowchart .connector {
    stroke: rgba(13, 71, 161, 0.35);
    stroke-width: 3;
    fill: none;
}
.flowchart .connector.thin {
    stroke-width: 2;
}
.flowchart .line-teal {
    stroke: rgba(38,166,154,0.7);
    fill: none;
}
.flowchart .line-red {
    stroke: rgba(239,83,80,0.7);
    fill: none;
}
.flowchart .line-amber {
    stroke: rgba(255,183,77,0.7);
    fill: none;
}
.flowchart .label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    fill: var(--primary-color);
}
.flowchart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    margin-top: 20px;
}
.flowchart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-color-light);
}
.flowchart-legend span::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--secondary-color);
    opacity: 0.4;
}