/**
Theme Name: AI Insightify Child 
Author: AI Insightify
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
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: ai-insightify-child
Template: astra
*/

/*
Theme Name: AI Insightify (Astra Child)
Theme URI: https://aiinsightify.com
Author: AI Insightify
Author URI: https://aiinsightify.com
Description: Custom Astra Child Theme for the AI Insightify Digital Agency.
Template: astra
Version: 1.0.0
Text Domain: ai-insightify
*/

/* STREAMING_CHUNK: Defining CSS variables and core resets... */
:root {
--brand-bg: #030305;
--brand-section: #0a0a0f;
--brand-blue: #5d5fef;
--brand-blue-hover: #4a4cbf;
--brand-text-gray: #9ca3af;
--brand-text-dark: #1a1d27;
--brand-text-muted: #6b7280;
--brand-border: #eaedf3;
--brand-light-bg: #f8f9fc;
--font-sans: 'Inter', sans-serif;
--font-heading: 'Space Grotesk', sans-serif;
--shadow-floating: 0 20px 40px -15px rgba(0,0,0,0.1);
--shadow-card: 0 10px 30px rgba(0,0,0,0.05);
--shadow-btn: 0 0 20px rgba(93,95,239,0.3);
--transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Limit these global styles to ONLY the custom template to prevent breaking Astra's default pages */
.page-template-template-ai-home {
font-family: var(--font-sans);
color: var(--brand-text-muted);
background-color: #ffffff;
overflow-x: hidden;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}

/* STREAMING_CHUNK: Styling layout utilities and Lenis scrolling... */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

.page-template-template-ai-home h1,
.page-template-template-ai-home h2,
.page-template-template-ai-home h3,
.page-template-template-ai-home h4 {
font-family: var(--font-heading);
color: var(--brand-text-dark);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
}

.ai-container { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 992px) { .grid-2 { grid-template-columns: 1fr 1fr; align-items: center; } }

/* STREAMING_CHUNK: Styling Hero and specific components... */
.dark-grid-bg {
background-color: var(--brand-bg);
background-image:
linear-gradient(to right, rgba(17, 17, 26, 0.5) 1px, transparent 1px),
linear-gradient(to bottom, rgba(17, 17, 26, 0.5) 1px, transparent 1px);
background-size: 60px 60px;
}

.text-outline { -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1); color: transparent; }
.glow-effect { position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(93,95,239,0.15) 0%, rgba(0,0,0,0) 70%); border-radius: 50%; pointer-events: none; z-index: 0; }
.pill-tag { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s ease; }
.pill-tag:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }

.marquee-container { overflow: hidden; white-space: nowrap; display: flex; align-items: center; }
.marquee-content { display: inline-flex; animation: marquee 20s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* STREAMING_CHUNK: Styling navigation and mobile menu... */
.nav-scrolled { background-color: rgba(3, 3, 5, 0.9); backdrop-filter: blur(12px); border-bottom-color: var(--brand-section); }

.mobile-toggle { display: block; background: none; border: none; cursor: pointer; width: 30px; height: 20px; position: relative; z-index: 60; }
.mobile-toggle span { display: block; position: absolute; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: var(--transition-smooth); }
.mobile-toggle span:nth-child(1) { top: 0; }
.mobile-toggle span:nth-child(2) { top: 9px; }
.mobile-toggle span:nth-child(3) { top: 18px; }
.mobile-toggle.active span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; background: rgba(3, 3, 5, 0.98); z-index: 55; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; opacity: 0; pointer-events: none; transition: var(--transition-smooth); backdrop-filter: blur(10px); }
.mobile-menu.active { opacity: 1; pointer-events: auto; }
.mobile-menu a { color: #fff; font-size: 1.5rem; font-family: var(--font-heading); font-weight: 700; transition: color 0.3s; }
.mobile-menu a:hover { color: var(--brand-blue); }

/* STREAMING_CHUNK: Styling page sections (Services, Portfolio, etc)... */
.section-label { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--brand-blue); text-transform: uppercase; margin-bottom: 1rem; }

.ai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.8rem 2rem; border-radius: 99px; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: var(--transition-smooth); border: none; }
.ai-btn-primary { background: var(--brand-blue); color: #fff; box-shadow: var(--shadow-btn); }
.ai-btn-primary:hover { background: var(--brand-blue-hover); transform: translateY(-4px); box-shadow: 0 10px 25px rgba(93,95,239,0.5); }

.partners { background: var(--brand-light-bg); padding-block: 5rem; text-align: center; border-bottom: 1px solid var(--brand-border); }
.partners-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; align-items: center; opacity: 0.6; transition: var(--transition-smooth); }
.partners-grid:hover { opacity: 1; }
.partners-grid img { height: 40px; filter: grayscale(100%); transition: var(--transition-smooth); }
.partners-grid img:hover { filter: grayscale(0%); transform: scale(1.05); }

.services { padding-block: 6rem; background: #fff; }
.services-header { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 992px) { .services-header { flex-direction: row; justify-content: space-between; align-items: flex-end; } .services-header h2 { max-width: 450px; } .services-header p { max-width: 550px; } }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.service-card { background: #fff; border: 1px solid var(--brand-border); border-radius: 16px; padding: 2.5rem; transition: var(--transition-smooth); cursor: pointer; }
.service-card:hover { box-shadow: var(--shadow-card); transform: translateY(-8px); border-color: transparent; }
.icon-box { width: 48px; height: 48px; font-size: 1.5rem; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 1.5rem; transition: var(--transition-smooth); }
.service-card:hover .icon-box { transform: scale(1.1) rotate(5deg); }
.card-accent { background: var(--brand-section); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; border: none;}
.card-accent h3 { color: #fff; font-size: 1.875rem; margin-bottom: 1rem; }

/* STREAMING_CHUNK: Styling Portfolio and Process grids... */
.portfolio { padding-block: 6rem; background: var(--brand-light-bg); text-align: center; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-bottom: 4rem; }
.portfolio-item { border-radius: 12px; overflow: hidden; position: relative; background: #fff; border: 1px solid var(--brand-border); aspect-ratio: 4/3;}
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(17, 21, 54, 0.9), rgba(17, 21, 54, 0.4)); display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; opacity: 0; transition: all 0.4s ease; text-align: left;}
.portfolio-item:hover img { transform: scale(1.05); }
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-title { color: #fff; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; transform: translateY(10px); transition: transform 0.4s ease; }
.portfolio-desc { color: var(--brand-text-gray); font-size: 0.875rem; transform: translateY(10px); transition: transform 0.4s ease 0.1s; }
.portfolio-item:hover .portfolio-title, .portfolio-item:hover .portfolio-desc { transform: translateY(0); }

.process { padding-block: 6rem; background: #fff; border-top: 1px solid var(--brand-border);}
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-top: 4rem; position: relative;}
@media(min-width: 992px) { .process-grid::before { content: ''; position: absolute; top: 24px; left: 0; right: 0; height: 2px; background: var(--brand-border); z-index: 0; } }
.process-step { position: relative; z-index: 1; background: #fff; padding-top: 1rem;}
.step-num { width: 48px; height: 48px; background: #fff; border: 2px solid var(--brand-blue); color: var(--brand-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; margin-bottom: 1.5rem; }

/* STREAMING_CHUNK: Styling Footer and Popups... */
.about-section { padding-block: 6rem; background: var(--brand-light-bg); }
.about-list { list-style: none; padding: 0; margin-block: 2rem; }
.about-list li { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; font-size: 0.9375rem; font-weight: 500; color: var(--brand-text-dark);}

.reviews { padding-block: 6rem; background: #fff; }
.masonry-grid { column-count: 1; column-gap: 1.5rem; margin-top: 4rem; }
@media (min-width: 768px) { .masonry-grid { column-count: 2; } }
@media (min-width: 1024px) { .masonry-grid { column-count: 3; } }
.review-card { break-inside: avoid; margin-bottom: 1.5rem; background: var(--brand-light-bg); padding: 2.5rem; border-radius: 24px; border: 1px solid var(--brand-border); transition: var(--transition-smooth); display: inline-block; width: 100%; }

.quote { padding-block: 8rem; background: linear-gradient(180deg, var(--brand-section) 0%, var(--brand-bg) 100%); text-align: center; color: #fff; }
.quote-line { width: 48px; height: 2px; background: var(--brand-blue); margin: 0 auto 1.5rem; }

.final-cta { padding-block: 8rem; background: var(--brand-bg); text-align: center; position: relative; overflow: hidden;}
.final-cta::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(93,95,239,0.1) 0%, rgba(0,0,0,0) 70%); border-radius: 50%; pointer-events: none;}

.ai-footer { background: var(--brand-bg); padding-block-start: 5rem; padding-block-end: 2rem; color: var(--brand-text-gray); font-size: 0.875rem; border-top: 1px solid rgba(255,255,255,0.05);}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; } }
.ai-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1.5rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }

.floating-wa { position: fixed; bottom: 2rem; right: 2rem; z-index: 90; display: flex; align-items: center; gap: 0.75rem; background: #25D366; color: #fff; padding: 0.75rem 1.25rem; border-radius: 99px; font-weight: 600; font-size: 0.875rem; box-shadow: 0 10px 25px rgba(37,211,102,0.3); transition: all 0.3s ease; }
.floating-wa:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(37,211,102,0.4); }

#exit-popup { position: fixed; inset: 0; background: rgba(5,5,15,0.9); z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; backdrop-filter: blur(5px);}
#exit-popup.active { opacity: 1; pointer-events: auto; }
.popup-content { background: #fff; padding: 3rem; border-radius: 24px; max-width: 500px; width: 90%; text-align: center; position: relative; transform: translateY(20px); transition: transform 0.4s ease; }
#exit-popup.active .popup-content { transform: translateY(0); }
.popup-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; color: var(--brand-text-muted); cursor: pointer; }

@keyframes shimmer { 100% { transform: translateX(100%); } }