/* Shared template for the Phoenix-metro IT support landing pages
 * (/it-support-phoenix/, -tempe/, -scottsdale/, -mesa/, -deer-valley/).
 * Linked from header.php for those pages only. Page-specific rules (hero and
 * local-section photos, link colors, proof block) live in each page's own
 * <style> block and load after this file. */
 /* CSS Custom Properties for Design System */
 :root {
 /* Color System */
 --color-primary: #F97316;
 --color-primary-light: #FFEDD5;
 --color-primary-dark: #C2410C;
 --color-secondary: #0F172A;
 --color-secondary-light: #1E293B;
 --color-secondary-dark: #0F172A;
 --color-accent: #FBBB05;
 --color-accent-light: #FEF3C7;
 --color-accent-dark: #D97706;
 --color-neutral-50: #FAFAFA;
 --color-neutral-100: #F5F5F5;
 --color-neutral-200: #E5E5E5;
 --color-neutral-300: #D4D4D4;
 --color-neutral-400: #A3A3A3;
 --color-neutral-500: #737373;
 --color-neutral-600: #525252;
 --color-neutral-700: #404040;
 --color-neutral-800: #262626;
 --color-neutral-900: #171717;
 
 /* Typography */
 --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 --font-size-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
 --font-size-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
 --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
 --font-size-lg: clamp(1.2rem, 1.15rem + 0.25vw, 1.3rem);
 --font-size-xl: clamp(1.5rem, 1.4rem + 0.5vw, 1.8rem);
 --font-size-2xl: clamp(1.9rem, 1.7rem + 1vw, 2.5rem);
 --font-size-3xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
 --font-size-4xl: clamp(3.5rem, 2.5rem + 5vw, 6rem);
 
 /* Spacing */
 --space-3xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
 --space-2xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
 --space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
 --space-sm: clamp(1rem, 0.95rem + 0.25vw, 1.5rem);
 --space-md: clamp(1.5rem, 1.4rem + 0.5vw, 2.5rem);
 --space-lg: clamp(2.5rem, 2.25rem + 1.25vw, 4rem);
 --space-xl: clamp(4rem, 3.5rem + 2.5vw, 6rem);
 --space-2xl: clamp(6rem, 5rem + 5vw, 8rem);
 
 /* Shadows */
 --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.06);
 --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.06);
 --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.06), 0 32px 64px rgba(0, 0, 0, 0.08);
 --shadow-primary: 0 10px 25px rgba(249, 115, 22, 0.25);
 
 /* Transitions */
 --transition-fast: 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
 --transition-smooth: 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
 --transition-elastic: 0.6s cubic-bezier(0.16, 1.36, 0.3, 1);
 
 /* Gradients */
 --gradient-primary: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
 --gradient-secondary: linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-secondary-dark) 100%);
 --gradient-cta: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-primary) 100%);
 --gradient-overlay: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.6));
 
 /* Border Radius */
 --radius-sm: 4px;
 --radius-md: 8px;
 --radius-lg: 16px;
 --radius-xl: 24px;
 --radius-2xl: 32px;
 --radius-full: 9999px;
 
 /* Animation */
 --animation-fade-in: fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 --animation-fade-up: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 --animation-fade-down: fade-down 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 --animation-fade-left: fade-left 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 --animation-fade-right: fade-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 
 /* Reset & Base Styles */
 *,
 *::before,
 *::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 
 html {
 scroll-behavior: smooth;
 font-size: 16px;
 }
 
 body {
 font-family: var(--font-primary);
 line-height: 1.6;
 color: var(--color-neutral-800);
 background-color: var(--color-neutral-50);
 overflow-x: hidden;
 }
 
 img {
 max-width: 100%;
 height: auto;
 }
 
 a {
 text-decoration: none;
 color: inherit;
 transition: var(--transition-smooth);
 }

 p a {
 color: var(--color-neutral-500);
 }

 button {
 border: none;
 background: none;
 font-family: inherit;
 cursor: pointer;
 }
 
 /* Text Selection */
 ::selection {
 background: var(--color-primary);
 color: white;
 }
 
 /* Removed custom cursor styles */
 
 /* Utility Classes */
 .container {
 width: 100%;
 max-width: 1400px;
 margin: 0 auto;
 padding: 0 var(--space-md);
 }
 
 /* Tailwind-named utilities (.flex, .grid, .items-center, .text-white, .shadow, .mt-*, ...) were
 * dropped: this file loads after /dist/styles.css, so they overrode Tailwind's responsive
 * variants in the global header/footer (e.g. `.flex` beat `lg:hidden` and showed the
 * mobile hamburger on desktop). The page content only uses .container and .text-center. */
 .text-center {
 text-align: center;
 }
 
 /* Text Gradients */
 .gradient-text {
 background: var(--gradient-primary);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 display: inline-block;
 }
 
 /* Proof block card headings (case study + onboarding). Tailwind's preflight resets h3 to
  * inherited size/weight, and the pages' own .proof-card h3 rule only sets spacing. */
 .proof-card h3 {
 font-size: var(--font-size-lg);
 font-weight: 700;
 color: var(--color-neutral-900);
 }
 
 /* Section Styles */
 section {
 position: relative;
 padding: var(--space-xl) 0;
 overflow: hidden;
 }
 
 .section-container {
 position: relative;
 z-index: 2;
 }
 
 .section-title {
 margin-bottom: var(--space-lg);
 }
 
 .section-title h2 {
 font-size: var(--font-size-3xl);
 font-weight: 800;
 line-height: 1.2;
 letter-spacing: -0.02em;
 margin-bottom: var(--space-sm);
 }
 
 .section-title p {
 font-size: var(--font-size-lg);
 font-weight: 400;
 color: var(--color-neutral-600);
 max-width: 700px;
 margin: 0 auto;
 }
 
 /* Noise Texture */
 .noise-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
 opacity: 0.05;
 pointer-events: none;
 }
 
 /* Simple animation classes instead of reveal */
 .reveal {
 opacity: 1;
 animation: fadeIn 0.8s ease-out forwards;
 }
 
 @keyframes fadeIn {
 from {
 opacity: 0;
 transform: translateY(30px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
 
 /* Header & Hero Section */
 .header {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 100;
 padding: var(--space-md) 0;
 }
 
 .header-container {
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 
 .logo {
 display: flex;
 align-items: center;
 font-weight: 800;
 font-size: var(--font-size-lg);
 color: white;
 z-index: 2;
 }
 
 .logo span {
 background: var(--gradient-primary);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 margin-left: 0.25em;
 }
 
 .hero {
 min-height: 100vh;
 display: flex;
 align-items: center;
 padding-top: var(--space-lg);
 background: var(--color-secondary-dark);
 position: relative;
 color: white;
 overflow: hidden;
 }
 
 .hero::before {
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 width: 80%;
 height: 100%;
 background-size: cover;
 background-position: center;
 opacity: 0.4;
 z-index: 0;
 clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
 }
 
 .hero-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: var(--gradient-overlay);
 z-index: 1;
 }
 
 .hero-content {
 position: relative;
 z-index: 2;
 max-width: 800px;
 }

 /* Hero flex row: main content + floating direct-answer card, added 9/16 */
 .hero-flex {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: var(--space-xl);
 }

 .hero-side-card {
 position: relative;
 z-index: 2;
 flex: 0 1 380px;
 max-width: 400px;
 margin-top: 70px;
 }

 @media (max-width: 900px) {
 .hero-flex {
 flex-direction: column;
 }

 .hero-side-card {
 margin-top: var(--space-lg);
 max-width: 100%;
 flex-basis: auto;
 }
 }

 .hero-title {
 font-size: var(--font-size-4xl);
 font-weight: 900;
 line-height: 1.1;
 letter-spacing: -0.02em;
 margin-bottom: var(--space-md);
 }
 
 .hero-subtitle {
 font-size: var(--font-size-xl);
 font-weight: 400;
 margin-bottom: var(--space-lg);
 max-width: 600px;
 }
 
 .metrics-bar {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-sm);
 margin-bottom: var(--space-lg);
 }
 
 .metric-item {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: var(--space-xs) var(--space-sm);
 background-color: rgba(255, 255, 255, 0.1);
 backdrop-filter: blur(10px);
 border-radius: var(--radius-md);
 font-weight: 600;
 transition: var(--transition-smooth);
 }
 
 .metric-item:hover {
 transform: translateY(-5px);
 background-color: rgba(255, 255, 255, 0.15);
 }
 
 .metric-item i {
 color: var(--color-primary);
 }
 
 .hero-cta {
 position: relative;
 display: inline-block;
 padding: var(--space-sm) var(--space-md);
 background: var(--gradient-cta);
 background-size: 200% 100%;
 color: white;
 font-weight: 700;
 font-size: var(--font-size-lg);
 border-radius: var(--radius-md);
 overflow: hidden;
 transition: var(--transition-elastic);
 box-shadow: var(--shadow-primary);
 z-index: 1;
 }
 
 .hero-cta::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, 
 rgba(255, 255, 255, 0), 
 rgba(255, 255, 255, 0.2), 
 rgba(255, 255, 255, 0));
 transition: var(--transition-smooth);
 z-index: -1;
 }
 
 .hero-cta:hover {
 transform: translateY(-5px) scale(1.05);
 box-shadow: 0 15px 30px rgba(249, 115, 22, 0.3);
 background-position: 100% 0;
 }
 
 .hero-cta:hover::before {
 left: 100%;
 }
 
 /* Service Cards Section */
 .services-section {
 background-color: white;
 position: relative;
 }
 
 .services-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: var(--space-lg);
 }
 
 .service-card {
 position: relative;
 background: white;
 border-radius: var(--radius-lg);
 overflow: hidden;
 box-shadow: var(--shadow-md);
 transition: var(--transition-elastic);
 transform: perspective(1000px) rotateY(0) translateZ(0);
 border: 1px solid rgba(0, 0, 0, 0.05);
 height: 100%;
 }
 
 .service-card:hover {
 transform: perspective(1000px) rotateY(3deg) translateY(-15px) translateZ(30px);
 box-shadow: var(--shadow-lg);
 }
 
 .service-img-container {
 height: 240px;
 position: relative;
 /* Clip the photo's hover zoom on the top and sides only, so the round icon
  * (bottom: -30px, plus its -10px hover lift) can hang below the photo instead
  * of being cut in half by overflow: hidden. */
 clip-path: inset(0 0 -80px 0);
 }
 
 .service-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transform-origin: center bottom; /* zoom grows up/out, never down past the photo edge */
 transition: transform 1.5s ease, filter 0.5s ease;
 }
 
 .service-card:hover .service-img {
 transform: scale(1.1);
 filter: saturate(1.2);
 }
 
 .service-img-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to bottom, 
 rgba(15, 23, 42, 0), 
 rgba(15, 23, 42, 0.7));
 }
 
 .service-icon-wrapper {
 position: absolute;
 bottom: -30px;
 left: 30px;
 width: 80px;
 height: 80px;
 background: var(--gradient-primary);
 border-radius: var(--radius-full);
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: var(--shadow-primary);
 z-index: 2;
 transition: var(--transition-elastic);
 }
 
 .service-card:hover .service-icon-wrapper {
 transform: translateY(-10px) scale(1.1);
 }
 
 .service-icon {
 color: white;
 font-size: 32px;
 transition: var(--transition-smooth);
 }
 
 .service-card:hover .service-icon {
 transform: rotate(360deg);
 }
 
 .service-content {
 padding: var(--space-xl) var(--space-md) var(--space-md);
 text-align: left;
 transition: var(--transition-smooth);
 }
 
 .service-title {
 font-size: var(--font-size-2xl);
 font-weight: 800;
 color: var(--color-secondary);
 margin-bottom: var(--space-sm);
 letter-spacing: -0.01em;
 }
 
 .service-description {
 font-size: var(--font-size-base);
 color: var(--color-neutral-600);
 margin-bottom: var(--space-md);
 line-height: 1.7;
 }
 
 .service-tags {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-xs);
 margin-top: var(--space-sm);
 }
 
 .service-tag {
 background: rgba(249, 115, 22, 0.1);
 color: var(--color-primary);
 padding: 4px 12px;
 border-radius: var(--radius-full);
 font-size: var(--font-size-xs);
 font-weight: 600;
 transition: var(--transition-smooth);
 }
 
 .service-card:hover .service-tag {
 background: var(--gradient-primary);
 color: white;
 box-shadow: var(--shadow-sm);
 }
 
 /* Advantage Section */
 .advantage-section {
 background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 position: relative;
 overflow: hidden;
 clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
 margin: var(--space-xl) 0;
 padding: var(--space-2xl) 0;
 }
 
 .advantage-section::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f97316' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 z-index: 0;
 }
 
 .advantage-header {
 text-align: center;
 margin-bottom: var(--space-xl);
 }
 
 .advantage-title {
 font-size: var(--font-size-3xl);
 font-weight: 900;
 line-height: 1.2;
 letter-spacing: -0.02em;
 margin-bottom: var(--space-sm);
 background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 }
 
 .advantage-subtitle {
 font-size: var(--font-size-xl);
 font-weight: 400;
 color: var(--color-neutral-600);
 max-width: 800px;
 margin: 0 auto;
 }
 
 .advantage-content {
 display: flex;
 align-items: center;
 gap: var(--space-xl);
 }
 
 .advantage-img-container {
 flex: 1;
 min-width: 350px;
 position: relative;
 }
 
 .advantage-img {
 width: 100%;
 border-radius: var(--radius-xl);
 box-shadow: var(--shadow-lg);
 transition: var(--transition-elastic);
 transform: perspective(1000px) rotateY(5deg);
 border: 1px solid rgba(249, 115, 22, 0.2);
 }
 
 .advantage-img-container::before {
 content: '';
 position: absolute;
 top: 25px;
 left: 25px;
 width: 100%;
 height: 100%;
 border: 4px solid var(--color-primary);
 border-radius: var(--radius-xl);
 z-index: -1;
 opacity: 0.3;
 transition: var(--transition-elastic);
 }
 
 .advantage-img-container:hover .advantage-img {
 transform: perspective(1000px) rotateY(0) translateY(-15px);
 }
 
 .advantage-img-container:hover::before {
 top: 35px;
 left: 35px;
 opacity: 0.6;
 }
 
 .advantage-text-container {
 flex: 1;
 min-width: 350px;
 }
 
 .advantage-description {
 font-size: var(--font-size-lg);
 line-height: 1.7;
 color: var(--color-neutral-700);
 margin-bottom: var(--space-lg);
 padding: var(--space-md);
 background-color: white;
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-md);
 border-left: 5px solid var(--color-primary);
 position: relative;
 transition: var(--transition-smooth);
 }
 
 .advantage-description:hover {
 transform: translateX(10px);
 box-shadow: var(--shadow-lg);
 }
 
 .advantage-features {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: var(--space-md);
 margin-top: var(--space-md);
 }
 
 .advantage-feature {
 display: flex;
 align-items: center;
 background-color: white;
 padding: var(--space-sm);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-sm);
 transition: var(--transition-smooth);
 cursor: default;
 }
 
 .advantage-feature:hover {
 transform: translateY(-8px) scale(1.05);
 box-shadow: var(--shadow-md);
 background: linear-gradient(135deg, rgba(249, 115, 22, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
 }
 
 .advantage-feature-icon {
 width: 50px;
 height: 50px;
 background: var(--gradient-primary);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-right: var(--space-sm);
 color: white;
 font-size: 20px;
 flex-shrink: 0;
 transition: var(--transition-smooth);
 }
 
 .advantage-feature:hover .advantage-feature-icon {
 transform: rotate(10deg) scale(1.1);
 }
 
 .advantage-feature-text {
 font-size: var(--font-size-base);
 font-weight: 600;
 color: var(--color-secondary);
 }
 
 /* Features Section */
 .features-section {
 background-color: white;
 position: relative;
 }
 
 .features-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 gap: var(--space-lg);
 margin-top: var(--space-xl);
 }
 
 .feature-box {
 background: white;
 border-radius: var(--radius-lg);
 padding: var(--space-lg);
 box-shadow: var(--shadow-md);
 transition: var(--transition-elastic);
 position: relative;
 z-index: 1;
 overflow: hidden;
 }
 
 .feature-box::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 4px;
 height: 100%;
 background: var(--gradient-primary);
 transition: var(--transition-smooth);
 z-index: -1;
 }
 
 .feature-box:hover {
 transform: translateY(-15px);
 box-shadow: var(--shadow-lg);
 }
 
 .feature-box:hover::before {
 width: 100%;
 opacity: 0.05;
 }
 
 .feature-icon {
 width: 90px;
 height: 90px;
 background: linear-gradient(135deg, var(--color-primary-light) 0%, white 100%);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto var(--space-md);
 transition: var(--transition-smooth);
 }
 
 .feature-box:hover .feature-icon {
 transform: rotate(10deg) scale(1.1);
 }
 
 .feature-icon i {
 font-size: 40px;
 background: var(--gradient-primary);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 }
 
 .feature-title {
 font-size: var(--font-size-xl);
 font-weight: 800;
 color: var(--color-secondary);
 margin-bottom: var(--space-sm);
 text-align: center;
 position: relative;
 }
 
 .feature-title::after {
 content: '';
 position: absolute;
 bottom: -10px;
 left: 50%;
 transform: translateX(-50%);
 width: 50px;
 height: 3px;
 background: var(--gradient-primary);
 transition: var(--transition-smooth);
 }
 
 .feature-box:hover .feature-title::after {
 width: 80px;
 }
 
 .feature-description {
 color: var(--color-neutral-600);
 text-align: center;
 font-size: var(--font-size-base);
 line-height: 1.7;
 }
 
 /* Local Section */
 .local-section {
 padding: var(--space-2xl) 0;
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
 position: relative;
 color: white;
 clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
 }
 
 .local-section::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to right, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.8));
 z-index: 0;
 }
 
 .local-container {
 position: relative;
 z-index: 1;
 max-width: 1400px;
 margin: 0 auto;
 padding: 0 var(--space-md);
 }
 
 .local-header {
 text-align: center;
 margin-bottom: var(--space-xl);
 }
 
 .local-title {
 font-size: var(--font-size-3xl);
 font-weight: 900;
 line-height: 1.2;
 letter-spacing: -0.02em;
 margin-bottom: var(--space-md);
 color: white;
 }
 
 .local-title span {
 background: var(--gradient-primary);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 }
 
 .local-content {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-xl);
 }
 
 .local-text {
 flex: 1;
 min-width: 300px;
 }
 
 .local-text p {
 font-size: var(--font-size-lg);
 line-height: 1.8;
 margin-bottom: var(--space-md);
 }
 
 .local-text p strong {
 color: var(--color-primary);
 font-weight: 700;
 }
 
 .local-highlights {
 flex: 1;
 min-width: 300px;
 }
 
 .local-highlight-item {
 display: flex;
 align-items: center;
 margin-bottom: var(--space-md);
 background: rgba(255, 255, 255, 0.1);
 padding: var(--space-sm);
 border-radius: var(--radius-md);
 transition: var(--transition-elastic);
 backdrop-filter: blur(10px);
 border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .local-highlight-item:hover {
 background: rgba(255, 255, 255, 0.2);
 transform: translateX(15px);
 }
 
 .local-highlight-icon {
 width: 60px;
 height: 60px;
 background: var(--gradient-primary);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-right: var(--space-sm);
 flex-shrink: 0;
 transition: var(--transition-smooth);
 }
 
 .local-highlight-item:hover .local-highlight-icon {
 transform: rotate(10deg);
 }
 
 .local-highlight-icon i {
 color: white;
 font-size: 24px;
 }
 
 .local-highlight-text {
 font-weight: 700;
 font-size: var(--font-size-lg);
 }
 
 /* CTA Section */
 .cta-section {
 padding: var(--space-2xl) 0;
 background: var(--gradient-primary);
 background-size: 200% 100%;
 color: white;
 text-align: center;
 position: relative;
 overflow: hidden;
 animation: gradientShift 10s ease infinite;
 }
 
 @keyframes gradientShift {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
 }
 
 .cta-section::before {
 content: '';
 position: absolute;
 width: 200%;
 height: 200%;
 top: -50%;
 left: -50%;
 background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 opacity: 0.1;
 animation: patternMove 60s linear infinite;
 }
 
 @keyframes patternMove {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
 }
 
 .cta-title {
 font-size: var(--font-size-3xl);
 font-weight: 900;
 line-height: 1.2;
 letter-spacing: -0.02em;
 margin-bottom: var(--space-md);
 position: relative;
 }
 
 .cta-description {
 font-size: var(--font-size-xl);
 max-width: 800px;
 margin: 0 auto var(--space-lg);
 position: relative;
 }
 
 .cta-button {
 position: relative;
 display: inline-block;
 padding: var(--space-sm) var(--space-lg);
 background: white;
 color: var(--color-primary);
 font-weight: 700;
 font-size: var(--font-size-lg);
 border-radius: var(--radius-md);
 text-decoration: none;
 overflow: hidden;
 transition: var(--transition-elastic);
 box-shadow: var(--shadow-lg);
 z-index: 1;
 }
 
 .cta-button::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, 
 rgba(249, 115, 22, 0), 
 rgba(249, 115, 22, 0.1), 
 rgba(249, 115, 22, 0));
 transition: var(--transition-smooth);
 z-index: -1;
 }
 
 .cta-button:hover {
 transform: translateY(-8px) scale(1.05);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
 color: var(--color-primary-dark);
 }
 
 .cta-button:hover::before {
 left: 100%;
 }
 
 /* Responsive Styles */
 @media screen and (max-width: 1200px) {
 .hero-title {
 font-size: clamp(2.5rem, 2rem + 3vw, 5rem);
 }
 
 .service-icon-wrapper {
 width: 70px;
 height: 70px;
 left: 50%;
 transform: translateX(-50%);
 }
 
 .service-card:hover .service-icon-wrapper {
 transform: translateX(-50%) translateY(-10px) scale(1.1);
 }
 }
 
 @media screen and (max-width: 992px) {
 .advantage-content, 
 .local-content {
 flex-direction: column;
 }
 
 .advantage-img-container {
 margin-bottom: var(--space-lg);
 }
 
 .hero::before {
 width: 100%;
 clip-path: none;
 }
 }
 
 @media screen and (max-width: 768px) {
 .metrics-bar {
 justify-content: center;
 }
 
 .services-grid {
 grid-template-columns: 1fr;
 max-width: 500px;
 margin: 0 auto;
 }
 }
 
 /* Animations */
 @keyframes fade-in {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
 }
 
 @keyframes fade-up {
 from {
 opacity: 0;
 transform: translateY(30px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
 
 @keyframes fade-down {
 from {
 opacity: 0;
 transform: translateY(-30px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
 
 @keyframes fade-left {
 from {
 opacity: 0;
 transform: translateX(30px);
 }
 to {
 opacity: 1;
 transform: translateX(0);
 }
 }
 
 @keyframes fade-right {
 from {
 opacity: 0;
 transform: translateX(-30px);
 }
 to {
 opacity: 1;
 transform: translateX(0);
 }
 }
 
 .animate-delay-1 {
 animation-delay: 0.1s;
 }
 
 .animate-delay-2 {
 animation-delay: 0.2s;
 }
 
 .animate-delay-3 {
 animation-delay: 0.3s;
 }
 
 .animate-delay-4 {
 animation-delay: 0.4s;
 }
 
 .animate-delay-5 {
 animation-delay: 0.5s;
 }
 

    /* Dark accordion FAQ style (matches aimitservices.com/comanaged-it/) */
    .faq-section-v2 {
        padding: 70px 0;
        background: #475569;
    }
    .faq-heading-wrap {
        text-align: center;
        margin-bottom: 40px;
    }
    .faq-heading-wrap h2 {
        color: white;
        font-size: var(--font-size-3xl, 2rem);
        font-weight: 800;
        margin-bottom: 16px;
    }
    .faq-underline {
        width: 80px;
        height: 4px;
        margin: 0 auto;
        border-radius: var(--radius-full);
        background: var(--gradient-primary);
    }
    .faq-list {
        max-width: 850px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .faq-item {
        background: #ececec;
        border-radius: var(--radius-lg);
        padding: 24px 28px;
        list-style: none;
    }
    .faq-item summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: baseline;
        gap: 16px;
        font-weight: 700;
        color: var(--color-secondary);
        font-size: 1.05rem;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::marker { content: ""; }
    .faq-item summary::before {
        content: "+";
        color: var(--color-primary);
        font-weight: 800;
        font-size: 1.3rem;
        line-height: 1;
        flex-shrink: 0;
        width: 18px;
    }
    .faq-item[open] summary::before {
        content: "\2212";
    }
    .faq-item .faq-answer {
        margin: 14px 0 0 34px;
        color: #4b5563;
        line-height: 1.7;
    }

    /* Solid pill buttons (orange, matches the gradient's --color-primary end) */
    .pill-button {
        display: inline-block;
        padding: 12px 24px;
        border-radius: var(--radius-lg);
        background: var(--color-primary);
        color: white !important;
        font-weight: 700;
        text-decoration: none;
        box-shadow: var(--shadow-primary);
        transition: var(--transition-elastic);
    }
    .pill-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 30px rgba(249, 115, 22, 0.35);
    }