/*
Theme Name: AVIZ Innovation
Theme URI: https://avizinnovation.figma.site/
Author: AVIZ Innovation
Author URI: https://avizinnovation.com
Description: Custom WordPress theme for AVIZ Innovation - Affordable Website Design Agency
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aviz-innovation
Tags: business, custom-menu, featured-images, full-width-template, responsive-layout
*/

/* ========================================
   TAILWIND-LIKE UTILITY RESET & BASE
======================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    color: #1f2937;
    background: #fff;
}

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

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

/* ========================================
   NAV
======================================== */
.site-nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 50;
    border-bottom: 1px solid #f3f4f6;
}

.nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

@media (min-width: 640px) {
    .nav-inner { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
    .nav-inner { padding: 0 2rem; }
}

.nav-logo img {
    height: 60px;
    width: auto;
}

.nav-desktop {
    display: none;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 768px) {
    .nav-desktop { display: flex; }
}

.nav-desktop a {
    color: #4b5563;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s;
    letter-spacing: 0.05em;
}

.nav-desktop a:hover {
    color: #2563eb;
}

.nav-cta {
    padding: 0.5rem 1.5rem;
    background: linear-gradient(to right, #2563eb, #9333ea);
    color: #fff !important;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: box-shadow 0.2s;
    font-size: 0.875rem;
}

.nav-cta:hover {
    box-shadow: 0 10px 25px rgba(37,99,235,0.4);
    color: #fff !important;
}

/* Hamburger */
.nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    position: relative;
    z-index: 60;
    background: none;
    border: none;
    cursor: pointer;
}

@media (min-width: 768px) {
    .nav-hamburger { display: none; }
}

.nav-hamburger svg {
    width: 24px;
    height: 24px;
    stroke: #1f2937;
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 320px;
    background: #fff;
    box-shadow: -4px 0 30px rgba(0,0,0,0.15);
    z-index: 55;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
    padding-top: 6rem;
}

.mobile-menu a {
    font-size: 1.125rem;
    color: #374151;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0.5rem;
    transition: color 0.2s;
    display: block;
}

.mobile-menu a:hover {
    color: #2563eb;
}

.mobile-menu .mobile-cta {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(to right, #2563eb, #9333ea);
    color: #fff !important;
    border-radius: 0.5rem;
    text-align: center;
    font-weight: 600;
    transition: box-shadow 0.2s;
}

.mobile-menu .mobile-cta:hover {
    box-shadow: 0 10px 25px rgba(37,99,235,0.4);
}

.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 50;
    display: none;
}

.mobile-overlay.open {
    display: block;
}

/* ========================================
   HERO SECTION
======================================== */
.hero-section {
    padding-top: 8rem;
    padding-bottom: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background: linear-gradient(to bottom right, #eff6ff, #f5f3ff, #fff);
    position: relative;
    overflow: hidden;
}

@media (min-width: 640px) {
    .hero-section { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .hero-section { padding-left: 2rem; padding-right: 2rem; }
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.50);
}

.hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.hero-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr 1fr; }
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    color: #fff;
}

@media (min-width: 640px) { .hero-title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero-title { font-size: 4.5rem; } }

.hero-title .gradient-text {
    background: linear-gradient(to right, #2563eb, #9333ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: #fff;
}

.hero-subtitle strong {
    font-weight: 700;
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    .hero-buttons { flex-direction: row; }
}

.btn-primary {
    padding: 1rem 2rem;
    background: linear-gradient(to right, #2563eb, #9333ea);
    color: #fff;
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: center;
    transition: box-shadow 0.2s;
    display: inline-block;
    font-size: 1rem;
}

.btn-primary:hover {
    box-shadow: 0 20px 40px rgba(37,99,235,0.3);
    color: #fff;
}

.btn-outline {
    padding: 1rem 2rem;
    border: 2px solid #2563eb;
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: center;
    transition: background 0.2s, color 0.2s;
    color: #fff;
    display: inline-block;
    font-size: 1rem;
}

.btn-outline:hover {
    background: #eff6ff;
    color: #3c00ff;
}

/* Hero card grid */
.hero-card-wrap {
    position: relative;
}

.hero-card-blur {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, #60a5fa, #a855f7);
    border-radius: 1.5rem;
    filter: blur(48px);
    opacity: 0.2;
}

.hero-card-box {
    position: relative;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    background: rgba(255,255,255,0.4);
}

.hero-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.hero-feature-item {
    padding: 1.5rem;
    border-radius: 0.75rem;
}

.hero-feature-item.blue { background: linear-gradient(to bottom right, #dbeafe, #eff6ff); }
.hero-feature-item.purple { background: linear-gradient(to bottom right, #f3e8ff, #faf5ff); }
.hero-feature-item.indigo { background: linear-gradient(to bottom right, #e0e7ff, #eef2ff); }
.hero-feature-item.pink { background: linear-gradient(to bottom right, #fce7f3, #fdf2f8); }

.hero-feature-item svg {
    width: 48px;
    height: 48px;
    margin-bottom: 0.75rem;
}

.hero-feature-item.blue svg { stroke: #2563eb; }
.hero-feature-item.purple svg { stroke: #9333ea; }
.hero-feature-item.indigo svg { stroke: #4f46e5; }
.hero-feature-item.pink svg { stroke: #db2777; }

.hero-feature-item h3 {
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.hero-feature-item p {
    font-size: 0.8rem;
    color: #4b5563;
}

/* ========================================
   WELCOME / ABOUT SECTION
======================================== */
.welcome-section {
    padding: 5rem 1rem;
    background: linear-gradient(to bottom right, #f9fafb, #eff6ff);
}

@media (min-width: 640px) { .welcome-section { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .welcome-section { padding-left: 2rem; padding-right: 2rem; } }

.welcome-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.welcome-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .welcome-grid { grid-template-columns: 1fr 1fr; }
}

.welcome-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #3c00ff;
    margin-bottom: 0.5rem;
}

@media (min-width: 640px) { .welcome-title { font-size: 3rem; } }

.welcome-subtitle {
    font-weight: 700;
    color: #8300ff;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.welcome-tagline {
    font-size: 1.25rem;
    color: #4b5563;
    margin-bottom: 1.5rem;
}

.welcome-text {
    color: #374151;
    margin-bottom: 1rem;
    line-height: 1.75;
}

.welcome-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-outline-blue {
    border: 1px solid #3c00ff;
    color: #3c00ff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    transition: background 0.2s, color 0.2s;
    display: inline-block;
}

.btn-outline-blue:hover {
    background: #3c00ff;
    color: #fff;
}

.welcome-img-wrap img {
    width: 100%;
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* ========================================
   PRICING SECTION
======================================== */
.pricing-section {
    padding: 5rem 1rem;
    background: #fff;
}

@media (min-width: 640px) { .pricing-section { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .pricing-section { padding-left: 2rem; padding-right: 2rem; } }

.pricing-inner {
    max-width: 1280px;
    margin: 0 auto;
}

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

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

@media (min-width: 640px) { .section-title { font-size: 3rem; } }

.section-desc {
    font-size: 1.25rem;
    color: #4b5563;
}

.pricing-grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

.pricing-card {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    padding: 2rem;
    transition: border-color 0.2s;
}

.pricing-card:hover {
    border-color: #60a5fa;
}

.pricing-card.featured {
    background: linear-gradient(to bottom right, #2563eb, #9333ea);
    color: #fff;
    border: none;
    box-shadow: 0 25px 50px rgba(37,99,235,0.35);
    transform: scale(1.05);
    position: relative;
}

.pricing-card.featured-purple:hover {
    border-color: #a855f7;
}

.featured-badge {
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    background: #facc15;
    color: #000;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.plan-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.plan-name.blue { color: #2f00ff; }
.plan-name.purple { color: #9d00ff; }
.plan-name.featured-name { color: #fff; }

.plan-type {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.plan-type.muted { color: #4b5563; }
.plan-type.featured-muted { color: #bfdbfe; }

.plan-price {
    margin-bottom: 1.5rem;
}

.plan-price .price {
    font-size: 3rem;
    font-weight: 800;
}

.plan-price .freq {
    color: #4b5563;
    font-size: 0.95rem;
}

.plan-price .freq-light { color: #bfdbfe; }

.plan-features {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.plan-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.plan-feature svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.plan-feature svg.check-blue { stroke: #2563eb; }
.plan-feature svg.check-purple { stroke: #9333ea; }
.plan-feature svg.check-white { stroke: #fff; }

.plan-cta {
    display: block;
    width: 100%;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}

.plan-cta.outline-blue {
    border: 2px solid #2563eb;
    color: #2563eb;
}
.plan-cta.outline-blue:hover { background: #eff6ff; }

.plan-cta.outline-purple {
    border: 2px solid #9333ea;
    color: #9333ea;
}
.plan-cta.outline-purple:hover { background: #faf5ff; }

.plan-cta.solid-white {
    background: #fff;
    color: #2563eb;
}
.plan-cta.solid-white:hover { background: #f3f4f6; }

/* ========================================
   WHY CHOOSE US
======================================== */
.why-section {
    padding: 5rem 1rem;
    background: linear-gradient(to bottom right, #f9fafb, #eff6ff);
}

@media (min-width: 640px) { .why-section { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .why-section { padding-left: 2rem; padding-right: 2rem; } }

.why-inner { max-width: 1280px; margin: 0 auto; }

.why-grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }

.why-card {
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s;
}

.why-card:hover {
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.why-icon {
    width: 56px;
    height: 56px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.why-icon svg { width: 32px; height: 32px; }

.why-icon.blue { background: linear-gradient(to bottom right, #dbeafe, #bfdbfe); }
.why-icon.blue svg { stroke: #2563eb; }
.why-icon.purple { background: linear-gradient(to bottom right, #f3e8ff, #e9d5ff); }
.why-icon.purple svg { stroke: #9333ea; }
.why-icon.indigo { background: linear-gradient(to bottom right, #e0e7ff, #c7d2fe); }
.why-icon.indigo svg { stroke: #4f46e5; }
.why-icon.green { background: linear-gradient(to bottom right, #dcfce7, #bbf7d0); }
.why-icon.green svg { stroke: #16a34a; }
.why-icon.pink { background: linear-gradient(to bottom right, #fce7f3, #fbcfe8); }
.why-icon.pink svg { stroke: #db2777; }
.why-icon.yellow { background: linear-gradient(to bottom right, #fef9c3, #fef08a); }
.why-icon.yellow svg { stroke: #ca8a04; }

.why-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.why-card p { color: #4b5563; line-height: 1.6; }

/* ========================================
   PROCESS SECTION
======================================== */
.process-section {
    padding: 5rem 1rem;
    background: #fff;
}

@media (min-width: 640px) { .process-section { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .process-section { padding-left: 2rem; padding-right: 2rem; } }

.process-inner { max-width: 1280px; margin: 0 auto; }

.process-grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) { .process-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(4, 1fr); } }

.process-step {
    position: relative;
    text-align: center;
}

.process-step-inner {
    padding: 2rem;
    border-radius: 1rem;
}

.process-step-inner.blue { background: linear-gradient(to bottom right, #eff6ff, #dbeafe); }
.process-step-inner.purple { background: linear-gradient(to bottom right, #faf5ff, #f3e8ff); }
.process-step-inner.indigo { background: linear-gradient(to bottom right, #eef2ff, #e0e7ff); }
.process-step-inner.pink { background: linear-gradient(to bottom right, #fdf2f8, #fce7f3); }

.process-num {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 0 auto 1.5rem;
}

.process-num.blue { background: linear-gradient(to bottom right, #2563eb, #1d4ed8); }
.process-num.purple { background: linear-gradient(to bottom right, #9333ea, #7e22ce); }
.process-num.indigo { background: linear-gradient(to bottom right, #4f46e5, #4338ca); }
.process-num.pink { background: linear-gradient(to bottom right, #db2777, #be185d); }

.process-step h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.process-step p { color: #4b5563; }

.process-connector {
    display: none;
    position: absolute;
    top: 50%;
    right: -1rem;
    width: 2rem;
    height: 2px;
    background: linear-gradient(to right, #93c5fd, #a855f7);
}

@media (min-width: 1024px) {
    .process-connector { display: block; }
}

/* ========================================
   PORTFOLIO
======================================== */
.portfolio-section {
    padding: 5rem 1rem;
    background: linear-gradient(to bottom right, #f9fafb, #f5f3ff);
}

@media (min-width: 640px) { .portfolio-section { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .portfolio-section { padding-left: 2rem; padding-right: 2rem; } }

.portfolio-inner { max-width: 1280px; margin: 0 auto; }

.portfolio-grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) { .portfolio-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); } }

.portfolio-card {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s;
}

.portfolio-card:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.portfolio-card-img {
    aspect-ratio: 16/9;
    overflow: hidden;
}

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

.portfolio-card:hover .portfolio-card-img img {
    transform: scale(1.1);
}

.portfolio-card-body {
    padding: 1.5rem;
}

.portfolio-card-body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.portfolio-card-body p { color: #4b5563; }

/* ========================================
   TESTIMONIALS
======================================== */
.testimonials-section {
    padding: 5rem 1rem;
    background: #fff;
}

@media (min-width: 640px) { .testimonials-section { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .testimonials-section { padding-left: 2rem; padding-right: 2rem; } }

.testimonials-inner { max-width: 1280px; margin: 0 auto; }

.testimonials-grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }

.testimonial-card {
    padding: 2rem;
    border-radius: 1rem;
}

.testimonial-card.blue-purple { background: linear-gradient(to bottom right, #eff6ff, #faf5ff); }
.testimonial-card.purple-pink { background: linear-gradient(to bottom right, #faf5ff, #fdf2f8); }
.testimonial-card.indigo-blue { background: linear-gradient(to bottom right, #eef2ff, #eff6ff); }

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

.testimonial-author img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-author h4 { font-weight: 700; margin-bottom: 0.25rem; }
.testimonial-author p { font-size: 0.875rem; color: #4b5563; }

.testimonial-card blockquote {
    color: #374151;
    font-style: italic;
    line-height: 1.75;
}

/* ========================================
   CONTACT SECTION
======================================== */
.contact-section {
    padding: 5rem 1rem;
    background: linear-gradient(to bottom right, #2563eb, #9333ea);
}

@media (min-width: 640px) { .contact-section { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .contact-section { padding-left: 2rem; padding-right: 2rem; } }

.contact-inner {
    max-width: 56rem;
    margin: 0 auto;
}

.contact-header {
    text-align: center;
    margin-bottom: 3rem;
}

.contact-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
}

@media (min-width: 640px) { .contact-header h2 { font-size: 3rem; } }

.contact-header p {
    font-size: 1.25rem;
    color: #bfdbfe;
}

.contact-box {
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}

@media (min-width: 768px) { .contact-box { padding: 3rem; } }

/* Contact Form 7 Overrides */
.contact-box .wpcf7 form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-box .wpcf7 input[type="text"],
.contact-box .wpcf7 input[type="email"],
.contact-box .wpcf7 input[type="tel"],
.contact-box .wpcf7 select,
.contact-box .wpcf7 textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
    outline: none;
    transition: box-shadow 0.2s, border-color 0.2s;
    font-family: inherit;
}

.contact-box .wpcf7 input:focus,
.contact-box .wpcf7 select:focus,
.contact-box .wpcf7 textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.contact-box .wpcf7 input[type="submit"] {
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(to right, #2563eb, #9333ea);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.contact-box .wpcf7 input[type="submit"]:hover {
    box-shadow: 0 10px 30px rgba(37,99,235,0.4);
}

.contact-box .wpcf7 .wpcf7-not-valid-tip {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.contact-box .wpcf7 .wpcf7-response-output {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.contact-form-row {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .contact-form-row { grid-template-columns: 1fr 1fr; }
}

.contact-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-form-group label {
    color: #374151;
    font-weight: 500;
}

/* ========================================
   CTA BANNER
======================================== */
.cta-banner {
    padding: 4rem 1rem;
    background: linear-gradient(to right, #111827, #1f2937);
}

@media (min-width: 640px) { .cta-banner { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .cta-banner { padding-left: 2rem; padding-right: 2rem; } }

.cta-banner-inner {
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
}

.cta-banner h2 {
    font-size: 1.875rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) { .cta-banner h2 { font-size: 2.25rem; } }

.cta-banner p {
    font-size: 1.25rem;
    color: #d1d5db;
    margin-bottom: 2rem;
}

.cta-banner a {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(to right, #2563eb, #9333ea);
    color: #fff;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: box-shadow 0.2s;
}

.cta-banner a:hover {
    box-shadow: 0 20px 40px rgba(37,99,235,0.3);
}

/* ========================================
   FOOTER
======================================== */
.site-footer {
    background: #111827;
    color: #d1d5db;
    padding: 3rem 1rem;
}

@media (min-width: 640px) { .site-footer { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .site-footer { padding-left: 2rem; padding-right: 2rem; } }

.footer-inner { max-width: 1280px; margin: 0 auto; }

.footer-grid {
    display: grid;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }

.footer-logo img {
    height: 60px;
    width: auto;
    margin-bottom: 1rem;
}

.footer-logo p { font-size: 0.875rem; line-height: 1.6; }

.footer-col h4 {
    color: #fff;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col ul li a { font-size: 0.875rem; transition: color 0.2s; }
.footer-col ul li a:hover { color: #fff; }
.footer-col ul li { font-size: 0.875rem; }

.footer-bottom {
    border-top: 1px solid #1f2937;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.footer-bottom p { font-size: 0.875rem; }

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

.footer-links a { font-size: 0.875rem; transition: color 0.2s; }
.footer-links a:hover { color: #fff; }

/* ========================================
   WORDPRESS BODY CLASSES
======================================== */
.admin-bar .site-nav {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-nav {
        top: 46px;
    }
}