:root {
    --text-color: #1D1D1F;
    --text-light: #444444;
    --bg-color: #ffffff;
    --surface-color: #ffffff;
    --secondary-bg: #f5f5f7;
    --accent-color: #0540F2;
    --accent-light: #3d6df5;
    --border-color: #e5e5e5;
    --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    --card-hover-shadow: 0 20px 60px rgba(5, 64, 242, 0.15);
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --spacing-container: 1400px;
    --hero-bg: linear-gradient(135deg, #020024 0%, #090979 35%, #00d4ff 100%);
}

.theme-toggle {
    cursor: pointer;
    font-size: 1.2rem;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    transition: color 0.3s;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

.theme-toggle:hover {
    color: var(--accent-light);
    background: rgba(0, 0, 0, 0.1);
}

.user-toggle {
    position: relative;
    background: rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    color: var(--text-color) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: none;
    margin-left: -2px;
}

.user-toggle:hover {
    background: var(--accent-color) !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 4px 20px rgba(5, 64, 242, 0.4);
}

.user-toggle svg {
    transition: transform 0.35s ease;
}

.user-toggle:hover svg {
    transform: scale(1.1);
}

[data-theme="dark"] .user-toggle {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .user-toggle:hover {
    background: var(--accent-color) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 24px rgba(5, 64, 242, 0.5);
}

[data-theme="dark"] {
    --text-color: #ffffff;
    --text-light: #a1a1a6;
    --bg-color: #000000;
    --surface-color: #1c1c1e;
    --secondary-bg: #101010;
    --border-color: #38383a;
    --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    --card-hover-shadow: 0 20px 60px rgba(5, 64, 242, 0.2);
    --hero-bg: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
.h4-style,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

.container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 0 24px;
}

.btn-sm {
    padding: 0.6rem 1.8rem;
    font-size: 0.85rem;
    margin-top: 15px;
}

.btn {
    display: inline-block;
    padding: 1rem 3rem;
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
    background-color: var(--accent-color);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    box-shadow: none;
    /* Removed shadow */
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn:hover {
    background-color: var(--accent-light);
    transform: translateY(-5px);
    box-shadow: none;
    /* Removed shadow */
}

section {
    padding: 190px 0;
    position: relative;
}

section h2 {
    text-align: center;
    margin-bottom: 80px;
    font-size: 3rem;
    background: linear-gradient(135deg, var(--text-color) 0%, var(--text-light) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Center h2 container implies wrapping it usually, but here we just center the block */
section h2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}


/* Animations */
.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation for grid items */
.portfolio-grid .portfolio-item:nth-child(1) {
    transition-delay: 0.1s;
}

.portfolio-grid .portfolio-item:nth-child(2) {
    transition-delay: 0.2s;
}

.portfolio-grid .portfolio-item:nth-child(3) {
    transition-delay: 0.3s;
}

.portfolio-grid .portfolio-item:nth-child(4) {
    transition-delay: 0.4s;
}

.portfolio-grid .portfolio-item:nth-child(5) {
    transition-delay: 0.5s;
}

.portfolio-grid .portfolio-item:nth-child(6) {
    transition-delay: 0.6s;
}

/* Header/Nav */
header {
    padding: 20px 0;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: var(--spacing-container);
    background: rgba(255, 255, 255, 0.85);
    /* Light glass */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    /* Safari support */
    z-index: 999999 !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

[data-theme="dark"] header {
    background: rgba(28, 28, 30, 0.7);
    /* Dark glass */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

header.scrolled {
    width: 95%;
    /* Slightly wider on scroll if needed, or keep consistent */
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
}

.logo {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Optional: Add a simple shape/logo icon here if not present in HTML */

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links li {
    position: relative;
}

.nav-links a {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-light);
    /* Softer text color */
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

@media (max-width: 1280px) {
    .nav-links {
        gap: 20px;
    }

    .nav-links a {
        padding: 8px 12px;
    }
}

@media (max-width: 1100px) {
    .nav-links {
        gap: 12px;
    }

    .nav-links a {
        padding: 6px 10px;
        font-size: 0.9rem;
    }
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text-color);
    background-color: rgba(0, 0, 0, 0.05);
    /* Subtle pill hover */
}

[data-theme="dark"] .nav-links a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Specific styling for the 'Calculator' CTA in nav to look like a button */
.nav-links a[href="calculator.php"],
.nav-links a[href="calculator"] {
    background-color: var(--accent-color);
    color: #ffffff !important;
    padding: 10px 24px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(5, 64, 242, 0.3);
}

.nav-links a[href="calculator.php"]:hover,
.nav-links a[href="calculator"]:hover {
    background-color: var(--accent-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(5, 64, 242, 0.4);
}

.mobile-menu-btn {
    color: var(--text-color);
}

/* Hero */
.hero {
    height: 100vh;
    /* Full screen height */
    min-height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    position: relative;
    overflow: hidden;
    margin-bottom: 120px;
    /* Increased separation */
    padding-top: 320px;
    /* Added spacing from header */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.hosting-hero {
    background: var(--bg-color);
    color: var(--text-color);
    text-align: center;
    padding-top: 200px;
    padding-bottom: 100px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.hosting-hero h1 {
    color: var(--text-color) !important;
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.hosting-hero p {
    color: var(--text-light);
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
}

#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}


.hero-video {
    display: none;
}

/* Gradient Overlay - Deeper, darker mix */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
    /* Below canvas */
    backdrop-filter: blur(3px);
    pointer-events: none;
}


.hero .container {
    position: relative;
    z-index: 3;
    /* Above everything */
    width: 100%;
}

.hero-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 3;
}

.hero h1 {
    font-size: 5rem;
    margin-bottom: 2.5rem;
    line-height: 1.4;
    /* Significantly looser */
    letter-spacing: -1px;
    /* Less tight */
    color: var(--text-color) !important;
}

.hero p {
    font-size: 1.5rem;
    color: var(--text-light) !important;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
}

/* Services */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.service-card {
    padding: 50px 40px;
    border-radius: 40px;
    /* Highly rounded */
    background: var(--surface-color);
    box-shadow: var(--card-shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

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

.service-card:hover {
    transform: translateY(-15px);
    box-shadow: var(--card-hover-shadow);
}

[data-theme="dark"] .service-card:hover {
    background: #252525;
}

.service-card h3 {
    font-size: 1.75rem;
    margin-bottom: 15px;
    color: var(--text-color);
}

/* Process Section */
.process {
    background-color: var(--secondary-bg);
    border-radius: 60px;
    margin: 40px 20px;
    /* Float effect */
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 60px;
}

@media (max-width: 768px) {
    .process-steps {
        grid-template-columns: 1fr;
    }
}

.step-card {
    background: var(--surface-color);
    padding: 50px 40px;
    border-radius: 40px;
    text-align: left;
    position: relative;
    box-shadow: var(--card-shadow);
    transition: all 0.4s ease;
}

.step-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: var(--card-hover-shadow);
}

.step-number {
    font-size: 4rem;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 2px var(--accent-color);
    margin-bottom: 20px;
    line-height: 1;
    opacity: 0.5;
}

.step-card h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

/* Portfolio */
/* Portfolio Redesign */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        /* Full width on mobile */
        gap: 24px;
        /* Smaller gap */
        margin-top: 40px;
        max-width: 500px;
        /* Limit width on mobile so they don't look huge */
        margin-left: auto;
        margin-right: auto;
    }
}

.portfolio-item {
    cursor: pointer;
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: var(--surface-color);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .portfolio-item {
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.portfolio-item:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 30px 60px rgba(5, 64, 242, 0.12);
    border-color: rgba(5, 64, 242, 0.3);
}

[data-theme="dark"] .portfolio-item:hover {
    box-shadow: 0 30px 60px rgba(5, 64, 242, 0.2);
}

.portfolio-img-wrapper {
    position: relative;
    aspect-ratio: 7/5;
    background-color: var(--secondary-bg);
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .portfolio-img-wrapper {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.portfolio-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0;
    will-change: transform;
}

.portfolio-item:hover .portfolio-img {
    transform: scale(1.06);
}

/* Gradient Overlay - Shows on hover */
.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    z-index: 2;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-content-overlay {
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.portfolio-item:hover .portfolio-content-overlay {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition-delay: 0.1s;
}

.portfolio-content {
    padding: 32px 32px 40px;
    background: var(--surface-color);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 3;
}

[data-theme="dark"] .portfolio-content {
    background: #151515;
}

.portfolio-content h4,
.h4-style {
    font-size: 1.6rem;
    margin: 0;
    color: var(--text-color);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}

.portfolio-item:hover .portfolio-content h4,
.h4-style {
    color: var(--accent-light);
}

.portfolio-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.p-tag {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform 0.3s ease;
}

.p-tag:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.25);
}

.portfolio-link {
    display: block;
}

/* Description always visible below image */
.case-study {
    display: block;
    padding: 0;
    font-size: 1.05rem;
    color: var(--text-light);
    line-height: 1.7;
    background: transparent;
    flex-grow: 1;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.portfolio-item:hover .case-study {
    opacity: 1;
}

[data-theme="dark"] .case-study {
    background: transparent;
    color: #bbb;
}

@media (max-width: 768px) {
    .case-study {
        padding: 20px;
        /* Reduced padding on mobile */
        font-size: 0.9rem;
        /* Slightly smaller text */
    }

    .portfolio-overlay {
        padding: 20px;
        /* Reduced padding on overlay */
    }

    .portfolio-content-overlay h4,
    .h4-style {
        font-size: 1.25rem;
        /* Smaller title */
    }
}

/* Button Outline */
.btn-outline {
    display: inline-block;
    background: transparent;
    color: var(--text-color);
    border: 2px solid var(--border-color);
    padding: 1rem 3rem;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-outline:hover {
    border-color: var(--accent-color);
    color: #fff;
    background: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(5, 64, 242, 0.2);
}

[data-theme="dark"] .btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Testimonials */
.testimonials {
    background: #000;
    color: #fff;
    text-align: center;
}

.testimonials h2 {
    color: #fff !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #fff !important;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.testimonial-card {
    background: #111;
    padding: 40px;
    border-radius: 15px;
    border: 1px solid #333;
    text-align: left;
}

.testimonial-text {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-light);
    margin-bottom: 20px;
}

.client-name {
    font-weight: 700;
    color: var(--accent-light);
}

/* About */
.about-content {
    max-width: 900px;
    text-align: center;
    margin: 0 auto;
}

.about p {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--text-light);
}

/* Contact */
.contact {
    text-align: center;
}

.contact-wrapper {
    max-width: 600px;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    background: var(--surface-color);
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    text-align: left;
    /* Keep form elements left-aligned for readability */
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    transition: 0.3s;
    background: var(--bg-color);
    color: var(--text-color);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    background: var(--surface-color);
}

.form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 1em;
    cursor: pointer;
}

.form-group select option {
    background-color: var(--bg-color);
    color: var(--text-color);
}



footer {
    padding: 80px 0;
    background-color: var(--secondary-bg);
    color: var(--text-light);
    margin-top: 0;
    border-top: 1px solid var(--border-color);
}

/* Utilities / Form Messages */
.hp-field {
    display: none;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-weight: 500;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background-color: #f8d7da;
    color: #09757a;
    border: 1px solid #f5c6cb;
}

/* Responsive */
/* Mobile Navigation */
.mobile-menu-btn {
    display: none;
    cursor: pointer;
    z-index: 999999 !important;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    line-height: 1;
    color: var(--text-color);
}

.mobile-menu-btn svg {
    stroke: currentColor;
    display: block;
}

/* Mobile Menu styles are loaded from assets/css/mobile-menu.css */

/* Calculator Styles */
.calc-section {
    padding: 40px;
    background: var(--surface-color);
    border-radius: 40px;
    box-shadow: var(--card-shadow);
    margin-bottom: 30px;
}

.calc-header {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.calc-option {
    margin-bottom: 25px;
}

.calc-option label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    color: var(--text-color);
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    perspective: 1000px;
}

.option-card {
    border: 2px solid var(--border-color);
    border-radius: 24px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: var(--primary-bg, #ffffff);
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.option-card:hover {
    border-color: var(--accent-light);
    background: var(--secondary-bg, #f9f9fa);
    transform: translateY(-8px) rotateX(8deg) rotateY(-8deg) scale(1.05);
    box-shadow: -10px 15px 25px rgba(0,0,0,0.1);
    z-index: 10;
}

.option-card.selected {
    border-color: var(--accent-color);
    background: rgba(9, 117, 122, 0.05);
    color: var(--accent-color);
    font-weight: 700;
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(9, 117, 122, 0.15);
}

.range-wrap {
    position: relative;
    margin: 0 auto 3rem;
    padding: 20px 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.range-wrap:hover {
    transform: translateY(-2px) scale(1.01);
}

.range {
    width: 100%;
}

.bubble {
    background: var(--accent-color);
    color: white;
    padding: 4px 12px;
    position: absolute;
    border-radius: 4px;
    left: 50%;
    transform: translateX(-50%);
    top: -40px;
    font-weight: bold;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: var(--primary-bg, #ffffff);
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.checkbox-label:hover {
    background: var(--secondary-bg, #f9f9fa);
    border-color: var(--accent-light);
    transform: perspective(1000px) translateY(-5px) rotateX(6deg) rotateY(-6deg) scale(1.03);
    box-shadow: -8px 12px 20px rgba(0,0,0,0.08);
    z-index: 10;
}

.checkbox-label input {
    margin-right: 15px;
    width: 20px;
    height: 20px;
}

.summary-box {
    position: sticky;
    top: 100px;
    background: #111;
    color: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.summary-box:hover {
    transform: perspective(1000px) translateY(-5px) rotateX(2deg) rotateY(-2deg) scale(1.02);
    box-shadow: -10px 15px 30px rgba(0,0,0,0.4);
    z-index: 10;
}

.summary-btn {
    width: 100%;
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.8);
    font-weight: bold;
    font-size: 1.1rem;
    padding: 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.summary-btn:hover {
    background: #111;
    color: white;
    border-color: #111;
    box-shadow: none;
    transform: none;
}

.summary-box h3 {
    color: #ffffff !important;
}

.total-price {
    font-size: 3.5rem;
    font-weight: 900;
    margin: 20px 0;
    color: #ffffff;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.price-note {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-bottom: 30px;
}


/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 100px;
    right: 35px; /* Aligned with floating btn: 30 + (60 - 50)/2 = 35 */
    width: 50px;
    height: 50px;
    background-color: var(--text-color);
    color: var(--bg-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform: translateY(20px);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background-color: var(--accent-light);
    color: #fff;
    transform: translateY(-5px);
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Calculator Layout */
.calculator-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

/* Tablet (Portrait) and Mobile Landscape */
@media (max-width: 1024px) {
    .container {
        max-width: 900px;
    }

    .hero {
        padding-top: 200px;
    }

    .hero h1 {
        font-size: 3.5rem;
    }
}

@media (max-width: 900px) {
    .calculator-layout {
        grid-template-columns: 1fr;
    }

    .summary-wrapper {
        order: -1;
        /* Move summary to top on mobile so user sees the price update */
        margin-bottom: 30px;
    }

    .summary-box {
        position: static;
        width: 100%;
        padding: 20px;
    }
}

@media (max-width: 768px) {
    section {
        padding: 60px 0;
    }

    .hero {
        padding-top: 140px;
        min-height: 100vh;
    }

    .hero-content {
        padding-bottom: 60px;
    }

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

    .hero p {
        font-size: 1.1rem;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 999999 !important;
    }

    .process-steps {
        grid-template-columns: 1fr;
    }

    .contact-wrapper {
        padding: 30px;
        width: 100%;
    }

    .floating-btn {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .modal-content {
        padding: 30px;
        width: 95%;
    }

    .option-grid {
        grid-template-columns: 1fr;
        /* Stack options to 1 column */
    }

    .features-grid {
        grid-template-columns: 1fr;
        /* Stack features to 1 column */
    }

    .total-price {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .option-grid {
        grid-template-columns: 1fr;
        /* Stack options on very small screens */
    }
}


/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

.preloader-logo {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -1px;
    background: linear-gradient(45deg, #000, var(--accent-color));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Floating Contact Button */
.floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: var(--accent-color);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    z-index: 1000;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.floating-btn:hover {
    transform: scale(1.1);
    background-color: var(--accent-light);
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    /* Above everything */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--surface-color);
    padding: 40px;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    position: relative;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: var(--text-light);
    line-height: 1;
}

.modal-close:hover {
    color: #333;
}

/* Footer Grid & Language Switcher */
footer {
    background: var(--surface-color);
    padding: 80px 0 20px;
    margin-top: auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--text-color);
}

.footer-section h4,
.footer-section h3,
.h4-style {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--text-color);
}

.footer-section h3,
.footer-section h4,
.footer-section .h4-style {
    text-align: left !important;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: var(--text-light);
    transition: color 0.3s;
}

.footer-section ul li a:hover {
    color: var(--accent-color);
}

.footer-section p {
    color: var(--text-light);
    margin-bottom: 15px;
}

.language-switcher {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.language-switcher a {
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    background: var(--surface-color);
    opacity: 0.8;
}

.language-switcher a:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.language-switcher a.active {
    background: var(--accent-color);
    color: white !important;
    border-color: var(--accent-color);
    opacity: 1;
    box-shadow: 0 4px 12px rgba(9, 117, 122, 0.3);
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}

/* Portfolio Images — 700×500 friendly (7:5 ratio, full image visible) */
.portfolio-img-wrapper {
    position: relative;
    aspect-ratio: 7/5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-bg);
    border-bottom: 1px solid var(--border-color);
}

.portfolio-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
    display: block;
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.portfolio-item:hover .portfolio-img {
    transform: scale(1.03);
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

/* -------------------------------------------------- */
/* SUPPORT PAGE STYLES */
/* -------------------------------------------------- */
.support-hero {
    padding: 220px 0 120px;
    text-align: center;
    background: var(--bg-color);
    position: relative;
    overflow: hidden;
}

.support-hero .container {
    position: relative;
    z-index: 5;
    pointer-events: auto;
}



.support-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 40px;
    color: var(--text-color) !important;
    position: relative;
    z-index: 5;

    /* Enforce white color */
    background: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: currentcolor;
}

[data-theme="dark"] .support-hero h1 {
    color: var(--text-color);
    background: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: currentcolor;
}

.support-hero p {
    font-size: 1.25rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.6;
    opacity: 0.9;
}

.support-search-form {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.support-search-input {
    width: 100%;
    padding: 20px 20px 20px 60px;
    font-size: 1.2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    /* White icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 20px center;
}

[data-theme="dark"] .support-search-input {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}

.support-search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.support-search-input:focus {
    outline: none;
    background-color: rgba(0, 0, 0, 0.08);
    /* Use background-color to preserve image */
    border-color: var(--accent-color);
    box-shadow: 0 0 20px rgba(9, 117, 122, 0.15);
}

[data-theme="dark"] .support-search-input:focus {
    background-color: rgba(255, 255, 255, 0.12);
    /* Use background-color to preserve image */
    box-shadow: 0 0 20px rgba(9, 117, 122, 0.3);
}

.support-topics {
    padding: 80px 0;
    background: var(--bg-color);
}

.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.topic-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    box-shadow: var(--card-shadow);
}

.topic-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
    box-shadow: var(--card-hover-shadow);
}

.topic-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    color: var(--accent-color);
}

.topic-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-color);
}

.support-contact {
    padding: 80px 0 120px;
    text-align: center;
    background: var(--bg-color);
}

.support-contact h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--text-color);
}

.support-contact p {
    color: var(--text-light);
    margin-bottom: 30px;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .support-hero {
        padding: 140px 0 80px;
    }

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

    .support-search-input {
        font-size: 1rem;
        padding: 15px 40px 15px 50px;
        background-position: 15px center;
    }
}


/* -------------------------------------------------- */
/* AI SEARCH CONTAINER */
/* -------------------------------------------------- */

.ai-answer-container {
    margin-top: 30px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: left;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
}

[data-theme="dark"] .ai-answer-container {
    background: rgba(20, 20, 30, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

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

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

.ai-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 10px;
}

[data-theme="dark"] .ai-header {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.ai-badge {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-light);
    transition: color 0.2s;
}

.ai-close:hover {
    color: #333;
}

[data-theme="dark"] .ai-close:hover {
    color: #fff;
}

.ai-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

[data-theme="dark"] .ai-content p {
    color: #eee;
}

/* AI Loading Animation */
.ai-loading {
    display: flex;
    gap: 5px;
    justify-content: center;
    padding: 10px 0;
}

.ai-loading span {
    width: 8px;
    height: 8px;
    background: #6366f1;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.ai-loading span:nth-child(1) {
    animation-delay: -0.32s;
}

.ai-loading span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

.support-search-form {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
}

/* -------------------------------------------------- */
/* BRIEF SECTION STYLES */
/* -------------------------------------------------- */

.brief-section {
    padding: 0 0 100px;
    background: var(--bg-color);
}

.brief-card {
    background: #111;
    border-radius: 24px;
    padding: 80px 60px;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .brief-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

/* Background Glow */
.brief-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 77, 77, 0.1), transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.brief-card::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -20%;
    width: 80%;
    height: 200%;
    background: radial-gradient(circle, rgba(249, 203, 40, 0.1), transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.brief-content {
    position: relative;
    z-index: 2;
}

.brief-content h2 {
    font-size: 3rem;
    margin-bottom: 25px;
    color: #fff;
    letter-spacing: -1px;
    line-height: 1.1;
}

[data-theme="light"] .brief-content h2 {
    color: #111;
}

.brief-content p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 40px;
    max-width: 500px;
    line-height: 1.6;
}

[data-theme="light"] .brief-content p {
    color: #555;
}

.btn-brief {
    background: linear-gradient(135deg, #ff4d4d 0%, #f9cb28 100%);
    color: #fff;
    padding: 18px 45px;
    font-weight: 700;
    border-radius: 50px;
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    font-size: 1.1rem;
    border: none;
    box-shadow: 0 10px 25px rgba(255, 77, 77, 0.3);
}

.btn-brief:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 35px rgba(255, 77, 77, 0.4);
}

.brief-visual {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
}

.brief-illustration {
    width: 100%;
    max-width: 300px;
    height: auto;
    animation: float 6s ease-in-out infinite reverse;
    filter: drop-shadow(0 0 30px rgba(255, 77, 77, 0.2));
}

@media (max-width: 968px) {
    .brief-card {
        grid-template-columns: 1fr;
        padding: 50px 30px;
        text-align: center;
        gap: 40px;
    }

    .brief-content p {
        margin: 0 auto 40px;
    }

    .brief-content h2 {
        font-size: 2.2rem;
    }
}

/* Blog Styles */
.blog-date {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center content */
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 15px;
    margin-left: 0;
    /* Remove indentation */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

.blog-date svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    stroke: var(--accent-color);
}

.blog-card h4,
.h4-style,
#blog .portfolio-item h4,
.h4-style,
.portfolio.blog-page .portfolio-item h4,
.h4-style {
    text-align: center;
    font-size: 1rem !important;
    line-height: 1.3;
    margin-bottom: 15px;
    font-weight: 700;
}

/* Stats & About Section */
.stats-about {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.stats-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 992px) {
    .stats-grid-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* Bento Grid */
.stats-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}

.stat-card {
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease;
}

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

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 10px;
}

.stat-label {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.9;
}

/* Specific Cards */
.big-card {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--accent-color) 0%, #3d6df5 100%);
    min-height: 220px;
}

.small-card {
    min-height: 180px;
}

.small-card.purple {
    background: linear-gradient(135deg, #6200ea 0%, #b388ff 100%);
}

.small-card.dark {
    background: #1c1c1e;
    /* Fallback */
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .small-card.dark {
    background: #1c1c1e;
    border: 1px solid #333;
    color: white;
}

/* Hosting Page Styles */
.hosting-hero {
    padding: 220px 0 120px;
    text-align: center;
    background: var(--bg-color);
    color: var(--text-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
}

.hosting-hero .container {
    position: relative;
    z-index: 5;
    pointer-events: auto;
}


.hosting-hero h1 {
    color: var(--text-color) !important;
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.hosting-hero p {
    font-size: 1.25rem;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto;
}

.pricing-section {
    padding: 60px 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.pricing-card {
    background: var(--surface-color);
    border-radius: 30px;
    padding: 40px;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--card-hover-shadow);
    border-color: var(--accent-color);
}

.pricing-card.featured {
    border: 2px solid var(--accent-color);
    transform: scale(1.05);
    z-index: 1;
}

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}

.pricing-header h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.pricing-price {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--accent-color);
    line-height: 1;
    margin-bottom: 5px;
}

.pricing-period {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 30px;
    display: block;
}

.pricing-features {
    margin-bottom: 30px;
    flex-grow: 1;
}

.pricing-features li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pricing-features li svg {
    color: var(--accent-color);
    flex-shrink: 0;
}

.discount-badge {
    background: #ff4757;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    display: inline-block;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.hosting-faq {
    padding: 80px 0;
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    margin-bottom: 15px;
    overflow: hidden;
}

.faq-question {
    padding: 20px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--accent-color);
}

.faq-item.active .faq-question::after {
    content: '-';
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    opacity: 0.8;
}

.faq-item.active .faq-answer {
    padding-bottom: 20px;
    max-height: 200px;
    /* approximates expanded height */
}

/* Support Page Hosting Block */
.support-hosting-block {
    background: #111;
    border-radius: 24px;
    padding: 80px 60px;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hosting-promo-section {
    padding: 20px 0;
}

[data-theme="light"] .support-hosting-block {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

/* Background Glows for Hosting */
.support-hosting-block::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 200%;
    background: radial-gradient(circle, rgba(5, 64, 242, 0.1), transparent 70%);
    /* Blue glow */
    z-index: 1;
    pointer-events: none;
}

.support-hosting-block::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -20%;
    width: 80%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.1), transparent 70%);
    /* Cyan glow */
    z-index: 1;
    pointer-events: none;
}

.support-hosting-content {
    position: relative;
    z-index: 2;
    padding: 0;
    /* Reset previous padding */
    display: block;
    /* Reset flex */
}

.support-hosting-content h2 {
    font-size: 3rem;
    margin-bottom: 25px;
    color: #fff !important;
    letter-spacing: -1px;
    line-height: 1.1;
}

[data-theme="light"] .support-hosting-content h2 {
    color: #111 !important;
}

.support-hosting-content p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 40px;
    max-width: 500px;
    line-height: 1.6;
}

[data-theme="light"] .support-hosting-content p {
    color: #555;
}

.support-hosting-visual {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    /* Reset background */
    min-height: auto;
    /* Reset height */
}

.support-hosting-visual i,
.support-hosting-visual svg {
    color: var(--accent-color);
    width: 100%;
    max-width: 250px;
    height: auto;
    filter: drop-shadow(0 0 30px rgba(5, 64, 242, 0.2));
}

@media (max-width: 968px) {
    .support-hosting-block {
        grid-template-columns: 1fr;
        padding: 50px 30px;
        text-align: center;
        gap: 40px;
    }

    .support-hosting-content p {
        margin: 0 auto 40px;
    }

    .support-hosting-content h2 {
        font-size: 2.2rem;
    }
}

/* Right Content */
.stats-content,
.stats-content h2,
.stats-content p,
.stats-buttons {
    text-align: left !important;
    align-items: flex-start;
}

.stats-content h2 {
    font-size: 3rem;
    margin-bottom: 25px;
    line-height: 1.1;
    width: 100%;
    display: block;
}

.stats-content p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 35px;
    max-width: 500px;
}

.stats-buttons {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.stats-buttons .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    box-sizing: border-box;
}

.btn-secondary {
    background: transparent;
    border: 2px solid var(--accent-color);
    color: var(--text-color);
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-secondary:hover {
    background: var(--accent-color);
    color: white;
}

/* Animation Keyframes */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.hosting-illustration {
    width: 100%;
    height: 100%;
    animation: float 6s ease-in-out infinite;
}

/* Specific delays for admin illustration if needed, or keeping same */
.hosting-promo-section:nth-of-type(2) .hosting-illustration {
    animation-delay: 1s;
}

/* CRM Showcase Section */
.crm-showcase {
    background: var(--bg-color);
    padding: 100px 0;
    overflow: hidden;
}

[data-theme="dark"] .crm-showcase {
    /* Optional specific background for dark mode if needed, otherwise inherits */
}

.crm-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.crm-text {
    flex: 1;
    max-width: 500px;
}

.crm-text h2 {
    text-align: left;
    margin-left: 0;
    margin-bottom: 25px;
    font-size: 2.5rem;
    line-height: 1.2;
    color: #000000;
}

[data-theme="dark"] .crm-text h2 {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


.crm-text p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 35px;
    line-height: 1.7;
}

.btn-crm {
    background: linear-gradient(90deg, #0540F2 0%, #3d6df5 100%);
    box-shadow: 0 10px 25px rgba(5, 64, 242, 0.3);
}

.btn-crm:hover {
    box-shadow: 0 15px 35px rgba(5, 64, 242, 0.5);
    transform: translateY(-3px);
}

.crm-image {
    flex: 1.2;
    position: relative;
    perspective: 1000px;
}

.crm-image img {
    width: 80%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    transform: rotateY(-10deg) rotateX(5deg);
    transition: transform 0.5s ease;
}

.crm-image:hover img {
    transform: rotateY(0) rotateX(0);
}

.crm-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(5, 64, 242, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(60px);
    z-index: -1;
}

[data-theme="dark"] .crm-image img {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

@media (max-width: 992px) {
    .crm-content-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .crm-text {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .crm-text h2 {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .crm-text p {
        margin-left: auto;
        margin-right: auto;
        max-width: 600px;
    }

    .crm-image img {
        transform: none;
    }

    .crm-image:hover img {
        transform: none;
    }
}

/* Comparison Table */
.comparison-table-section {
    padding: 100px 0;
    font-size: 1rem;
}

.table-wrapper {
    overflow-x: auto;
    border-radius: 30px;
    box-shadow: var(--card-shadow);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.table-wrapper:hover {
    box-shadow: var(--card-hover-shadow);
    transform: translateY(-5px);
}

.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 900px;
}

.comparison-table th,
.comparison-table td {
    padding: 20px 30px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

/* Headers */
.comparison-table th {
    background: var(--surface-color);
    font-weight: 800;
    color: var(--text-color);
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 10;
    padding-top: 35px;
    padding-bottom: 35px;
    letter-spacing: -0.5px;
}

/* Highlight Column Headers */
.comparison-table th:nth-child(3) {
    color: var(--accent-light);
    /* Highlight 'Strona Firmowa' potentially */
}

/* First Column (Labels) */
.comparison-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--text-color);
    background: var(--surface-color);
    position: sticky;
    left: 0;
    z-index: 5;
    border-right: 1px solid var(--border-color);
    min-width: 250px;
}

/* Row Styling */
.comparison-table tr:last-child td {
    border-bottom: none;
}

.comparison-table tbody tr:hover td {
    background-color: rgba(5, 64, 242, 0.03);
}

/* Striping */
.comparison-table tr:nth-child(even) td:not(:first-child) {
    background-color: rgba(0, 0, 0, 0.015);
}

[data-theme="dark"] .comparison-table tr:nth-child(even) td:not(:first-child) {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Typography refinements */
.comparison-table td {
    color: var(--text-light);
    font-weight: 500;
}

.check-icon {
    color: var(--accent-color);
    font-size: 1.2rem;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(5, 64, 242, 0.3));
}

/* Mobile Scroll Hint */
.table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: var(--secondary-bg);
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* =============================================
   BLOG CARDS — Premium redesign
   ============================================= */

.blog-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 36px;
    margin-top: 60px;
}

@media (max-width: 768px) {
    .blog-cards-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 40px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

.blog-card {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.45s ease,
        border-color 0.3s ease;
    position: relative;
}

/* Accent top bar that expands on hover */
.blog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), #3d6df5);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 3;
    border-radius: 20px 20px 0 0;
}

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

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 56px rgba(5, 64, 242, 0.14);
    border-color: rgba(5, 64, 242, 0.25);
}

/* Image wrapper */
.blog-card__img-wrap {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--secondary-bg);
}

.blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
    display: block;
}

.blog-card:hover .blog-card__img {
    transform: scale(1.07);
}

/* Gradient overlay on image */
.blog-card__img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(5, 10, 40, 0.65) 0%,
            rgba(0, 0, 0, 0) 55%);
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Article number badge (01, 02 …) in bottom-left of image */
.blog-card__num {
    position: absolute;
    bottom: 14px;
    left: 18px;
    font-size: 2rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.12);
    line-height: 1;
    letter-spacing: -1px;
    pointer-events: none;
    transition: color 0.4s ease;
    z-index: 2;
}

.blog-card:hover .blog-card__num {
    color: rgba(255, 255, 255, 0.28);
}

/* Body */
.blog-card__body {
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    background: var(--surface-color);
}

/* Meta (date) */
.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.9;
}

/* Title */
.blog-card__title {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--text-color);
    margin: 0;
    transition: color 0.3s ease;
}

.blog-card:hover .blog-card__title {
    color: var(--accent-color);
}

/* Excerpt */
.blog-card__excerpt {
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.65;
    margin: 0;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Read more CTA */
.blog-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 4px;
    transition: gap 0.3s ease;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.blog-card:hover .blog-card__cta {
    gap: 14px;
}

.blog-card__cta svg {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.blog-card:hover .blog-card__cta svg {
    transform: translateX(4px);
}

/* Dark mode overrides */
[data-theme="dark"] .blog-card {
    background: #151515;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .blog-card:hover {
    border-color: rgba(61, 109, 245, 0.4);
    box-shadow: 0 24px 56px rgba(5, 64, 242, 0.2);
}

[data-theme="dark"] .blog-card__body {
    background: #151515;
}

[data-theme="dark"] .blog-card__excerpt {
    color: #aaa;
}

[data-theme="dark"] .blog-card__title {
    color: #f0f0f0;
}

[data-theme="dark"] .blog-card__cta {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* =============================================
   COMPREHENSIVE RESPONSIVE OVERHAUL
   ============================================= */

/* --- TABLET (≤1024px) --- */
@media (max-width: 1024px) {
    .hero {
        padding-top: 200px;
    }

    .hero h1 {
        font-size: 3.5rem;
    }

    .hosting-hero h1 {
        font-size: 2.8rem;
    }

    .support-hero h1 {
        font-size: 2.8rem;
    }
}

/* --- MOBILE (≤768px) --- */
@media (max-width: 768px) {

    /* Hero */
    .hero {
        padding-top: 140px;
        min-height: 100svh;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        margin-bottom: 60px;
    }

    .hero h1 {
        font-size: 2.4rem;
        letter-spacing: -0.5px;
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }

    .hero p {
        font-size: 1.05rem;
    }

    /* Section headings */
    section h2 {
        font-size: 2rem;
        margin-bottom: 40px;
    }

    section {
        padding: 60px 0;
    }

    /* Hosting/Support hero */
    .hosting-hero {
        padding-top: 120px;
        padding-bottom: 60px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }

    .hosting-hero h1 {
        font-size: 2.2rem;
    }

    .hosting-hero p {
        font-size: 1rem;
    }

    .support-hero {
        padding: 130px 0 70px;
    }

    .support-hero h1 {
        font-size: 2.2rem;
    }

    /* Services grid */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-card {
        padding: 35px 25px;
    }

    /* Stats buttons */
    .stats-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .stats-content h2 {
        font-size: 2rem;
    }

    /* Process */
    .process {
        margin: 20px 10px;
        border-radius: 30px;
    }

    /* Calculator */
    .calc-section {
        padding: 20px;
        border-radius: 20px;
    }

    /* Contact */
    .contact-wrapper {
        padding: 25px 20px;
    }

    /* Footer */
    footer {
        padding: 50px 0 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .footer-section h4,
    .h4-style {
        font-size: 1rem;
    }

    /* Pricing */
    .pricing-card.featured {
        transform: scale(1.0);
    }

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

    .pricing-price {
        font-size: 2.5rem;
    }



    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    /* Nav header pill */
    header {
        width: 95%;
        top: 10px;
    }

    nav {
        padding: 0 16px;
    }
}

/* --- SMALL PHONE (≤480px) --- */
@media (max-width: 480px) {

    /* Hero */
    .hero {
        padding-top: 120px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        margin-bottom: 40px;
    }

    .hero h1 {
        font-size: 2rem;
        letter-spacing: 0;
    }

    .hero p {
        font-size: 0.95rem;
    }

    .hero-content {
        padding: 0 10px;
    }

    /* Section headings */
    section h2 {
        font-size: 1.7rem;
        margin-bottom: 30px;
    }

    section {
        padding: 50px 0;
    }

    /* Container */
    .container {
        padding: 0 16px;
    }

    /* Buttons */
    .btn {
        padding: 0.85rem 2rem;
        font-size: 0.9rem;
    }

    .btn-outline {
        padding: 0.85rem 2rem;
        font-size: 0.9rem;
    }

    /* Hosting hero */
    .hosting-hero {
        padding-top: 100px;
        padding-bottom: 50px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .hosting-hero h1 {
        font-size: 1.9rem;
    }

    /* Support hero */
    .support-hero {
        padding: 110px 0 60px;
    }

    .support-hero h1 {
        font-size: 1.9rem;
    }

    /* Services */
    .service-card {
        padding: 25px 20px;
        border-radius: 25px;
    }

    .service-card h3 {
        font-size: 1.4rem;
    }

    /* Process steps */
    .step-card {
        padding: 30px 20px;
        border-radius: 25px;
    }

    /* Footer */
    footer {
        padding: 40px 0 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    /* Stats content */
    .stats-content h2 {
        font-size: 1.7rem;
    }

    .stats-content p {
        font-size: 1rem;
    }

    /* Contact wrapper */
    .contact-wrapper {
        padding: 20px 15px;
        border-radius: 14px;
    }

    /* Calculator */
    .calc-section {
        padding: 15px;
        border-radius: 16px;
    }

    .total-price {
        font-size: 2rem;
    }

    .summary-box {
        padding: 20px 15px;
        border-radius: 14px;
    }

    /* Pricing */
    .pricing-card {
        padding: 25px 20px;
        border-radius: 20px;
    }

    /* Support contact wrapper */
    .support-hosting-block {
        padding: 35px 20px;
        border-radius: 16px;
    }

    .support-hosting-content h2 {
        font-size: 1.8rem;
    }

    /* CRM section */
    .crm-text h2 {
        font-size: 1.8rem;
    }



    /* Header pill */
    header {
        width: 98%;
        top: 8px;
        border-radius: 30px;
    }

    nav {
        padding: 0 12px;
    }

    .logo {
        font-size: 1.2rem;
    }
}

/* --- VERY SMALL (≤360px) --- */
@media (max-width: 360px) {
    .hero h1 {
        font-size: 1.75rem;
    }

    section h2 {
        font-size: 1.5rem;
    }

    .hosting-hero h1 {
        font-size: 1.7rem;
    }

    .support-hero h1 {
        font-size: 1.7rem;
    }

    .container {
        padding: 0 12px;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }

    .logo {
        font-size: 1.1rem;
    }
}

/* Projects Page Hero */
.projects-hero {
    padding: 180px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.projects-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    background: var(--hero-bg, linear-gradient(135deg, #0540F2 0%, #00d4ff 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.projects-hero p {
    font-size: 1.25rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
    text-align: center !important;
}

@media (max-width: 768px) {
    .projects-hero {
        padding: 140px 0 40px;
    }

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


/* Mega Menu Desktop */
.has-dropdown {
    position: relative;
}

.mega-menu {
    position: absolute;
    top: calc(100% + 38px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

/* Invisible bridge to keep hover active */
.mega-menu::before {
    content: '';
    position: absolute;
    top: -42px;
    left: 0;
    width: 100%;
    height: 42px;
}

[data-theme="dark"] .mega-menu {
    background: rgba(20, 20, 20, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.05);
}

.has-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-col h4,
.h4-style {
    font-size: 0.85rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mega-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mega-menu a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color) !important;
    padding: 5px 0 !important;
    border-radius: 0 !important;
    white-space: nowrap;
    opacity: 0.8;
}

.mega-menu a:hover {
    color: var(--accent-color) !important;
    opacity: 1;
    background: transparent !important;
    transform: translateX(5px);
}

/* Dropdown Arrow */
.dropdown-arrow {
    font-size: 0.7rem;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.has-dropdown:hover>a .dropdown-arrow {
    transform: rotate(180deg);
}

/* Mobile Mega Menu */
@media (max-width: 768px) {
    .mega-menu {
        position: static;
        transform: none !important;
        box-shadow: none;
        background: transparent;
        backdrop-filter: none;
        border: none;
        padding: 10px 0 10px 20px;
        display: none;
        grid-template-columns: 1fr;
        gap: 20px;
        opacity: 1;
        visibility: visible;
        width: 100%;
    }

    .has-dropdown.active .mega-menu {
        display: grid;
    }

    .has-dropdown>a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .has-dropdown.active>a .dropdown-arrow {
        transform: rotate(180deg);
    }
}

/* reCAPTCHA v3 - hide badge, per Google policy (disclosure text added in forms) */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ========================================================================== */
/* OPENAI REDESIGN OVERRIDES                                                  */
/* ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --text-color: #000000;
    --text-light: #444444;
    --bg-color: #ffffff;
    --surface-color: #ffffff;
    --secondary-bg: #f7f7f8;
    --accent-color: #000000;
    --accent-light: #333333;
    --border-color: #e5e5e5;
    --card-shadow: none;
    --card-hover-shadow: none;
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --hero-bg: transparent;
}

[data-theme="dark"] {
    --text-color: #ffffff;
    --text-light: #a1a1a6;
    --bg-color: #000000;
    --surface-color: #000000;
    --secondary-bg: #111111;
    --border-color: #333333;
    --accent-color: #ffffff;
    --accent-light: #cccccc;
    --card-shadow: none;
    --card-hover-shadow: none;
    --hero-bg: transparent;
}

/* 2. Header & Navigation */
header {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    background: var(--bg-color) !important;
    padding: 15px 0 !important;
}

/* 3. Typography Formatting */
h1,
h2,
h3,
h4,
.h4-style,
h5,
h6 {
    letter-spacing: -0.04em !important;
}

section h2 {
    background: none !important;
    -webkit-text-fill-color: var(--text-color) !important;
    text-align: left !important;
    font-size: 3.5rem !important;
    margin-bottom: 3rem !important;
}

.hero h1 {
    font-size: 5rem !important;
    text-align: left !important;
    line-height: 1.05 !important;
}

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

/* 4. Flat Cards & Sections */
.service-card,
.portfolio-item,
.step-card,
.blog-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    padding: 40px 0 !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.service-card:hover,
.portfolio-item:hover,
.step-card:hover,
.blog-card:hover {
    transform: perspective(1000px) translateY(-5px) rotateX(2deg) rotateY(-2deg) scale(1.02) !important;
    box-shadow: -10px 15px 30px rgba(0,0,0,0.2) !important;
    border-color: var(--text-color) !important;
    z-index: 10;
}

/* Remove gradient overlays on portfolio */
.portfolio-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
    /* Flat dark background instead of gradient */
}

/* 5. Buttons */
.btn {
    background-color: var(--text-color) !important;
    color: var(--bg-color) !important;
    border-radius: 4px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    border: 1px solid var(--text-color) !important;
}

.btn:hover {
    background-color: transparent !important;
    color: var(--text-color) !important;
    transform: none !important;
}


/* Ensure left alignment in hero */
.hero-content {
    text-align: left !important;
    align-items: flex-start !important;
}

.hero p {
    text-align: left !important;
    font-size: 1.25rem !important;
    max-width: 600px !important;
}

.hero .btn {
    align-self: flex-start !important;
}

/* Ensure header container is full width and handles items cleanly */
header .container {
    max-width: 1400px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Fix section heading alignments */
section h2 {
    max-width: 100% !important;
    margin-left: 0 !important;
}

/* Mobile responsive adjustments for massive headings */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 3rem !important;
    }

    section h2 {
        font-size: 2.2rem !important;
    }
}

/* MEGA MENU OVERRIDES */
.mega-menu {
    top: 100% !important;
    /* Glue to header bottom */
    transform: translateX(-50%) !important;
    border-radius: 0 !important;
    background: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-top: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .mega-menu {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
}

/* CARDS ALIGNMENT FIX */
.service-card h3 {
    text-align: left !important;
}

.service-card p {
    text-align: left !important;
}

.step-card h3 {
    text-align: left !important;
}

/* REMOVE ANY ROUNDED IMAGES */
img,
.portfolio-img-wrapper,
.portfolio-img {
    border-radius: 0 !important;
}

/* HERO BUTTON ALIGNMENT */
.hero .btn {
    margin-top: 30px !important;
}


/* LOGO FIX */
.logo {
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    font-size: 1.5rem !important;
}

/* FIX SERVICES ICONS */
.service-icon {
    display: flex;
    justify-content: flex-start !important;
    margin-bottom: 20px !important;
}

.service-icon img {
    border-radius: 0 !important;
}

/* CONTACT SECTION ALIGNMENT */
.contact-container {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1px solid var(--border-color) !important;
    background: transparent !important;
}

/* FOOTER FIX */
.footer {
    border-top: 1px solid var(--border-color) !important;
    background: var(--bg-color) !important;
}

/* ========================================================================== */
/* OPENAI REDESIGN OVERRIDES - PART 2 (FINAL POLISH)                          */
/* ========================================================================== */

/* Hero Alignment & Cleanup */
#networkCanvas,
.hero-overlay,
.particles-js-canvas-el {
    display: none !important;
    /* Remove particle networks */
}

.hero-content {
    margin: 0 !important;
    /* Prevent auto-centering */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.hero p {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Process Section Flattening */
.process,
.process .container,
.bg-light {
    background: transparent !important;
    border-radius: 0 !important;
}

/* Stats Bento Grid Flattening */
.stat-card {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text-color) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.stat-card:hover {
    transform: perspective(1000px) translateY(-5px) rotateX(2deg) rotateY(-2deg) scale(1.02) !important;
    box-shadow: -10px 15px 30px rgba(0,0,0,0.2) !important;
    z-index: 10;
}

.stat-card.purple,
.stat-card.dark,
.stat-card.big-card {
    background: transparent !important;
    color: var(--text-color) !important;
}

.stat-card h3,
.stat-card p,
.stat-card .stat-number {
    color: var(--text-color) !important;
    background: none !important;
    -webkit-text-fill-color: var(--text-color) !important;
}

/* Testimonials / Trusted Us Flattening */
.testimonials,
#testimonials {
    background: transparent !important;
    color: var(--text-color) !important;
}

.testimonial-card,
.review-card {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text-color) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.testimonial-card:hover,
.review-card:hover {
    transform: perspective(1000px) translateY(-5px) rotateX(2deg) rotateY(-2deg) scale(1.02) !important;
    box-shadow: -10px 15px 30px rgba(0,0,0,0.2) !important;
    z-index: 10;
}

/* Services Grid Borders */
.services-grid {
    gap: 0 !important;
    /* Remove gap so borders touch */
}

.service-card {
    border-top: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-left: none !important;
    padding: 40px 30px !important;
}

/* Ensure right-most cards don't double border, or just use a simple grid layout */
.services-grid {
    border-left: 1px solid var(--border-color) !important;
    border-top: none !important;
}

/* Fix portfolio tiny text */
.portfolio-item h3,
.portfolio-item h4,
.portfolio-content h3,
.portfolio-content h4,
.h4-style {
    font-size: 1.2rem !important;
    font-weight: bold !important;
    margin-top: 20px !important;
}

.portfolio-item h3,
.portfolio-item h4,
.portfolio-content h3,
.portfolio-content h4 {
    margin-bottom: 10px !important;
    text-align: center !important;
}

.portfolio-item p {
    font-size: 1rem !important;
    text-align: center !important;
    margin-top: 0 !important;
}

/* Fix hollow text in process steps */
.step-number {
    -webkit-text-stroke: 0 !important;
    color: var(--text-light) !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    background: none !important;
    -webkit-text-fill-color: var(--text-color) !important;
    opacity: 1 !important;
    margin-bottom: 10px !important;
}

/* Ensure padding is consistent on process steps */
.step-card {
    padding: 30px !important;
}

/* FIX HEADER ALIGNMENT (NAV) */
header nav {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

header .container {
    display: flex !important;
    width: 100% !important;
    margin: 0 auto !important;
    justify-content: space-between !important;
}

/* ========================================================================== */
/* OPENAI HEADER ALIGNMENT & BUTTONS (FINAL)                                  */
/* ========================================================================== */

/* Push the right side (Login, CTA, Theme Toggle) to the far right */
.nav-push-right {
    margin-left: auto !important;
}

/* Ensure nav-links fills the remaining space so margin-left: auto works */
.nav-links {
    flex-grow: 1 !important;
}

/* OpenAI "Log In" Link */
.nav-login {
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    padding: 8px 16px !important;
    color: var(--text-color) !important;
    transition: opacity 0.2s !important;
}

.nav-login:hover {
    opacity: 0.7 !important;
    background: transparent !important;
}

/* OpenAI "Try ChatGPT" Style Button */
.openai-btn {
    background-color: var(--text-color) !important;
    color: var(--bg-color) !important;
    border-radius: 6px !important;
    padding: 8px 18px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: none !important;
}

.openai-btn:hover {
    opacity: 0.85 !important;
    background-color: var(--text-color) !important;
    color: var(--bg-color) !important;
}

/* Force container to 100% width on large screens */
header .container {
    max-width: 100% !important;
    padding: 0 40px !important;
}

@media (max-width: 768px) {
    header .container {
        padding: 0 20px !important;
    }
}

/* ========================================================================== */
/* OPENAI REDESIGN OVERRIDES - PART 3 (TRUE FULL WIDTH)                       */
/* ========================================================================== */

/* Hide canvases */
#hero-canvas,
#networkCanvas,
.hero-overlay,
.particles-js-canvas-el {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Header Container */
header {
    width: 100% !important;
    /* Force true full viewport width without scrollbar bug */
    max-width: 100% !important;
}

header .container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 40px !important;
}

/* Nav Links Spacing */
.nav-links {
    flex-grow: 1 !important;
    justify-content: flex-start !important;
    margin-left: 30px !important;
    /* Space between Wilimits and links */
}

/* OpenAI Buttons */
.nav-push-right {
    margin-left: auto !important;
    /* Pushes everything to the right */
}

.openai-btn {
    background-color: var(--text-color) !important;
    color: var(--bg-color) !important;
    border-radius: 50px !important;
    /* OpenAI's ChatGPT button is pill-shaped */
    padding: 10px 24px !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Ensure no horizontal scrolling breaks header */
html,
body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ========================================================================== */
/* OPENAI REDESIGN OVERRIDES - PART 4 (CENTER NAV & DROPDOWN)                 */
/* ========================================================================== */

/* Center the navigation links */
.nav-links {
    justify-content: center !important;
    margin-left: 0 !important;
}

/* Lower the mega menu dropdown slightly */
.mega-menu {
    top: calc(100% + 24px) !important;
    /* Push it below the header line */
    border-top: 1px solid var(--border-color) !important;
    /* Restore top border for floating card */
}

/* Ensure the invisible bridge covers the new gap so the menu doesn't vanish on hover */
.mega-menu::before {
    top: -24px !important;
    height: 24px !important;
}

/* ========================================================================== */
/* OPENAI REDESIGN OVERRIDES - PART 5 (PERFECT CENTERING & MENU DROP)         */
/* ========================================================================== */

/* Center the middle links by distributing free space */
.nav-links {
    width: 100% !important;
}

.nav-links>li:first-child {
    margin-left: auto !important;
    /* Pushes the menu group away from the logo */
}

/* .nav-push-right already has margin-left: auto! This creates equal spacing! */
.nav-push-right {
    margin-left: auto !important;
    /* Pushes the buttons away from the menu group */
}

/* Lower the mega menu dropdown MUCH lower */
.mega-menu {
    top: calc(100% + 45px) !important;
    /* 45px pushes it way down */
}

.mega-menu::before {
    top: -45px !important;
    height: 45px !important;
}

/* ========================================================================== */
/* OPENAI REDESIGN OVERRIDES - PART 6 (SECTION CENTERING & VISIBILITY)        */
/* ========================================================================== */

/* Fix invisible white text on Testimonials heading */
#testimonials h2,
.testimonials h2 {
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
}

/* Center About and Contact headings */
#about h2,
#contact h2,
.about h2,
.contact h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Center About paragraph text */
#about .about-content p,
#about p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 800px !important;
}

/* Center the contact form itself */
.contact-wrapper {
    margin: 0 auto !important;
}

/* ========================================================================== */
/* OPENAI REDESIGN OVERRIDES - PART 7 (GLOBAL HERO FIXES)                     */
/* ========================================================================== */

/* Fix invisible text on ALL inner page heroes (projects, hosting, support, etc) */
[class*="-hero"] h1,
[class*="-hero"] h2,
[class*="-hero"] p {
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
    text-align: left !important;
    margin-left: 0 !important;
}

/* Make sure all inner page heroes have a clean white background, not gradients */
[class*="-hero"] {
    background: transparent !important;
    padding-top: 150px !important;
    /* Ensure enough space below the header */
    padding-bottom: 50px !important;
}

/* Hide any remaining background particles or canvases in inner pages */
[class*="-hero"] canvas,
[class*="-hero"] .hero-overlay {
    display: none !important;
    opacity: 0 !important;
}

/* ========================================================================== */
/* OPENAI REDESIGN OVERRIDES - PART 8 (FULL-WIDTH MEGA MENU)                  */
/* ========================================================================== */

/* Detach mega menu from the specific link */
.has-dropdown {
    position: static !important;
}

/* Make mega menu span the entire screen */
.mega-menu {
    position: absolute !important;
    top: 100% !important;
    /* Glue exactly to the bottom of the header */
    left: 0 !important;
    width: 100vw !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    gap: 120px !important;
    /* Lots of space between columns */
    padding: 60px 40px !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--border-color) !important;
    /* Slight separator from header */
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03) !important;
}

.has-dropdown:hover .mega-menu {
    transform: none !important;
    /* No sliding sideways */
}

/* Style the columns like OpenAI */
.mega-menu .mega-col {
    min-width: 200px;
}

.mega-menu .mega-col h4,
.h4-style {
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--text-light) !important;
    margin-bottom: 24px !important;
    font-weight: 500 !important;
}

.mega-menu .mega-col a {
    font-size: 0.95rem !important;
    margin-bottom: 16px !important;
    display: block !important;
    color: var(--text-color) !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

/* Make the first column HUGE (like the left side of OpenAI's menu) */
.mega-menu .mega-col:first-child a {
    font-size: 1.6rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 20px !important;
}

/* Force containing block to be the header by stripping position from ancestors */
header .container,
header nav,
header .nav-links,
header .has-dropdown {
    position: static !important;
    transform: none !important;
}

/* Ensure mega menu spans from the very left edge of the header */
.mega-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    /* Force stretch */
    width: 100vw !important;
}

/* ========================================================================== */
/* OPENAI REDESIGN OVERRIDES - PART 10 (PERFECT MEGA MENU CENTERING)          */
/* ========================================================================== */

/* Fix visual imbalance by using CSS Grid with fixed column widths */
.mega-menu {
    display: grid !important;
    grid-template-columns: 350px 250px 250px !important;
    /* Forces columns to take exact space */
    justify-content: center !important;
    /* Centers the whole grid block perfectly */
    gap: 40px !important;
    padding: 60px 40px !important;
}

/* Ensure column contents don't stretch */
.mega-menu .mega-col {
    min-width: 0 !important;
}

/* Fine-tune typography for balance */
.mega-menu .mega-col:first-child a {
    font-size: 1.4rem !important;
    /* Slightly smaller so it doesn't overpower */
    margin-bottom: 22px !important;
}

.mega-menu .mega-col:not(:first-child) a {
    font-size: 0.95rem !important;
    margin-bottom: 18px !important;
    color: #444 !important;
    /* Slightly muted like OpenAI */
}

/* ========================================================================== */
/* OPENAI REDESIGN OVERRIDES - PART 11 (CENTER ALL HEADINGS)                  */
/* ========================================================================== */

/* Center ALL section headings site-wide for perfect symmetry */
section h2,
.section-title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 800px;
}

/* Also ensure any hero subtitle text is nicely centered if the user wants symmetry, 
   wait, heroes on internal pages we forced left earlier. Let's keep internal heroes left, 
   but center all homepage section headings. */

/* ========================================================================== */
/* OPENAI REDESIGN OVERRIDES - PART 12 (SERVICE PAGES CENTERING)              */
/* ========================================================================== */

/* Fix left-alignment override on Service Pages (.sp-hero) and force perfect centering */
.sp-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.sp-hero h1,
.sp-hero p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 800px !important;
    /* Limit width for better readability */
}

/* Center buttons in hero */
.sp-hero-btns {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Center all section headers inside service pages */
.sp-section-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 50px !important;
}

.sp-section-header h2,
.sp-section-header .sp-section-label {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ========================================================================== */
/* OPENAI REDESIGN OVERRIDES - PART 13 (CENTER ALL INNER CARDS & BLOCKS)      */
/* ========================================================================== */

/* Center the Deep Content blocks which were sitting on the far left */
.sp-content-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.sp-content-block {
    max-width: 900px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Center text inside all feature/process/why cards */
.sp-why-card,
.sp-why-content,
.sp-process-card,
.sp-feat-card,
.sp-testi-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Force headings and paragraphs inside these blocks to align center */
.sp-content-block h2,
.sp-content-block p,
.sp-why-card h3,
.sp-why-card p,
.sp-process-card h4,
.h4-style,
.sp-process-card p,
.sp-feat-card h4,
.h4-style,
.sp-feat-card p,
.sp-testi-card p,
.sp-testi-card .sp-testi-name {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Align checkmark lists gracefully in the center */
.sp-why-checks {
    display: inline-block !important;
    text-align: left !important;
    /* Keep the bullets aligned to themselves */
}

/* Specific fix: override the old [class*="-hero"] that was too strong */
.sp-hero h1,
.sp-hero p {
    text-align: center !important;
}

/* ========================================================================== */
/* OPENAI REDESIGN OVERRIDES - PART 14 (BULLETPROOF CENTERING & PROD FIX)     */
/* ========================================================================== */

/* Ensure the wrapper takes full width so flex-center works */
.sp-content-inner {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Ensure the block itself is centered */
.sp-content-block {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Force flex centering on all grid cards just in case they were block elements */
.sp-feat-card,
.sp-process-card,
.sp-why-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
}


/* Fix Mobile Header Background */
@media (max-width: 768px) {

    /* Mobile Header Background */
    header,
    header.scrolled {
        background-color: var(--bg-color) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    /* Never show dynamic scrolled page title in mobile header */
    .header-page-title,
    header.scrolled .header-page-title {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}
/* Fix projects hero text alignment */
.projects-hero h1, .projects-hero p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }

/* Fix mega-menu header text alignment */
.mega-menu .h4-style { text-align: left !important; margin-left: 0 !important; }

/* Fix hosting hero text alignment */
.hosting-hero h1, .hosting-hero p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }

/* Fix Support Hero Alignment and Search Input Visibility */
.support-hero h1 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
.support-search-input { border: 1px solid var(--border-color) !important; background-color: var(--secondary-bg) !important; color: var(--text-color) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23444444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important; }
.support-search-input::placeholder { color: var(--text-light) !important; }
[data-theme='dark'] .support-search-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important; }

/* Fix mobile hero overlap */
@media (max-width: 768px) {
    .hero {
        padding-top: 180px !important;
    }
    .hero h1 {
        margin-top: 0 !important;
        font-size: 2.5rem !important;
    }
}