/* assets/css/custom.css - ELITE DESIGN TASK FORCE EDITION */

/* --- CSS Variables for Theming - STRICT ADHERENCE TO VISUALS --- */
:root {
  --brand-blue: #4a72b1;         /* Primary Blue (CTAs, icons, accents) */
  --brand-blue-darker: #3a5f9a;  /* Hover state for primary blue */
  --brand-blue-light: #e0e7f3;   /* Background for icon circles, light UI elements */
  --brand-accent: #d8a05f;       /* Gold/Orange (Navigation active dot, specific highlights) */
  --brand-text: #374151;         /* Main Dark Text (Headings, primary body) */
  --brand-text-light: #6b7280;   /* Secondary/Lighter Body Text */
  --brand-bg-soft: #f8f9fa;     /* Very Light Gray (Section backgrounds like "The Struggle") */
  --hero-bg: #FFFFFF;           /* Hero & White Section Backgrounds */
  --section-bg-white: #FFFFFF;
  --footer-bg: #374151; /* Dark Gray Footer (Matches --brand-text for consistency) */
  --footer-text: #e0e7f3;       /* Light text for footer (Matches --brand-blue-light) */
  --footer-heading: #FFFFFF;     /* White for footer headings */
  --border-color-light: #e5e7eb; /* Light border color */

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-display: "Playfair Display", Georgia, Cambria, "Times New Roman", Times, serif;
}

/* --- Global Styles & Resets --- */
body {
  font-family: var(--font-sans);
  color: var(--brand-text);
  background-color: var(--hero-bg); /* Default page background is white */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
  font-size: 16px;
}
html {scroll-behavior: smooth;}

h1, h2, h3, h4, h5, h6 {
  color: var(--brand-text);
  font-family: var(--font-display); /* Default to display font for headings */
  font-weight: 700; /* Bold by default */
}
h3, h4, h5, h6 { /* Smaller headings can use sans-serif if design dictates */
    font-family: var(--font-sans);
    font-weight: 600; /* Semi-bold for smaller headings */
}
p {
  color: var(--brand-text-light); /* Default paragraph text */
}

/* --- Utility Classes (Keep for flexibility, but primary styling in components) --- */
.font-display-custom { font-family: var(--font-display); letter-spacing: -0.02em; font-weight: 700;}
.text-brand-blue-css { color: var(--brand-blue) !important; } /* Use important if needed to override Tailwind */
.bg-brand-blue-css { background-color: var(--brand-blue) !important; }
.border-brand-blue-css { border-color: var(--brand-blue) !important; }
/* ... other utilities if absolutely necessary ... */

/* --- Header --- */
#header {
  background-color: var(--hero-bg); /* Solid white background */
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Very subtle shadow */
  transition: box-shadow 0.3s ease-out, padding 0.3s ease-out;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
#header.shadow-lg { /* Scrolled state */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.05) !important;
}
#header .logo-text { font-size: 1.625rem; /* 26px */ font-weight: 700; color: var(--brand-blue);}
#header .logo-text span { font-weight: 400; color: var(--brand-accent);}
#header nav a.nav-link {
  font-size: 0.9375rem; /* 15px */
  color: var(--brand-text); /* Darker, as in image */
  font-weight: 500;
  padding: 0.5rem 0.75rem; /* More balanced padding */
  position: relative; /* For the ::after pseudo-element */
}
#header nav a.nav-link:hover,
#header nav a.nav-link.active-nav-link {
  color: var(--brand-blue); /* Removed !important, check if effective */
}
#header nav a.nav-cta-button { /* Request Demo Button */
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem;
  border-width: 1.5px;
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background-color: transparent;
  font-weight: 500;
  border-radius: 9999px; /* Pill shape */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
#header nav a.nav-cta-button:hover {
    background-color: var(--brand-blue);
    color: white;
}
.active-nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px; /* Adjust as needed for vertical position */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--brand-accent);
    width: 6px; /* Slightly larger for visibility */
    height: 6px;
    border-radius: 50%;
    /* margin-top: 5px; - replaced by absolute positioning */
}


/* --- Hero Section --- */
#hero {
  background-color: var(--hero-bg);
  min-height: auto; /* Let content define height */
  padding-top: clamp(8rem, 20vh, 12rem); /* More top padding */
  padding-bottom: clamp(6rem, 15vh, 8rem);
}
#hero #hero-headline {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.75rem); /* Large, responsive */
  line-height: 1.1;
  color: var(--brand-text);
  font-weight: 700;
  margin-bottom: 1.5rem; /* More space below headline */
}
#hero #hero-subheadline {
  font-size: clamp(1.125rem, 3vw, 1.375rem); /* 18-22px */
  color: var(--brand-text-light);
  max-width: 680px; /* As per visual balance */
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
  margin-bottom: 2.5rem; /* More space below subheadline */
}
#hero .hero-cta-button {
  background-color: var(--brand-blue);
  color: white;
  padding: 0.9rem 3rem; /* Generous padding */
  font-size: 1rem; /* 16px */
  font-weight: 500;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(74, 114, 177, 0.25); /* Softer shadow */
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
#hero .hero-cta-button:hover {
    background-color: var(--brand-blue-darker);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(74, 114, 177, 0.3);
}
#hero .mt-10 p { /* Service list */
  font-size: 0.875rem; /* 14px */
  color: var(--brand-text-light); /* Lighter than main text */
  letter-spacing: 0.04em; /* Slight letter spacing */
}

/* --- "The Struggle" Section --- */
#the-struggle {
  padding-top: 5.5rem; padding-bottom: 5.5rem;
  background-color: var(--brand-bg-soft);
}
#the-struggle h2 {
  font-size: clamp(2rem, 5vw, 2.75rem); /* Matches visual weight */
  margin-bottom: 1rem;
}
#the-struggle > .container > .text-center > p {
  font-size: clamp(1.05rem, 2.5vw, 1.1875rem); /* ~17-19px */
  color: var(--brand-text-light);
  max-width: 620px;
  margin-left: auto; margin-right: auto; /* Ensure centered */
}
#the-struggle .grid > div { padding: 1.25rem; }
#the-struggle .grid h3 {
  font-family: var(--font-sans); /* Sans-serif for these subheads */
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  margin-bottom: 0.625rem;
  color: var(--brand-text);
}
#the-struggle .grid p { font-size: 0.9375rem; color: var(--brand-text-light); line-height: 1.55; }
#the-struggle .grid .text-4xl { margin-bottom: 0.75rem; } /* Less space below icon */
#the-struggle .grid .text-4xl i { font-size: 2rem; color: var(--brand-blue); } /* Consistent blue icons. Image confirms no background circle here. */

/* --- "How We Help" Section (Service Cards) --- */
#how-we-help {
  padding-top: 5.5rem; padding-bottom: 6.5rem;
  background-color: var(--section-bg-white);
}
#how-we-help > .container > .text-center > h2 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  margin-bottom: 1rem;
}
#how-we-help > .container > .text-center > p {
  font-size: clamp(1.05rem, 2.5vw, 1.1875rem);
  color: var(--brand-text-light);
  max-width: 720px;
  margin-left: auto; margin-right: auto; /* Ensure centered */
}
.service-card {
  background-color: var(--hero-bg); /* White cards on white background, relies on shadow/border */
  border-radius: 0.5rem; /* 8px */
  padding: 1.75rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05); /* Subtle shadow */
  border: 1px solid var(--border-color-light); /* Light border */
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 7px 18px rgba(0,0,0,0.07);
}
.service-card .flex-shrink-0 { /* Icon container */
  width: 3rem; height: 3rem;
  border-radius: 50%; /* ★★★ CHANGED to circle to match image ★★★ */
  background-color: var(--brand-blue-light); /* Removed !important, ensure specificity if issues */
  display: flex; /* For centering icon inside */
  align-items: center;
  justify-content: center;
}
.service-card .flex-shrink-0 i {
  font-size: 1.375rem;
  color: var(--brand-blue); /* Removed !important */
}
.service-card h3 {
  font-family: var(--font-sans);
  font-size: 1.0625rem; /* ~17px */
  font-weight: 600;
  color: var(--brand-text);
  margin-left: 0.75rem !important; /* Tailwind override for spacing - kept as per comment if structure is fixed */
}
.service-card p { font-size: 0.875rem; color: var(--brand-text-light); line-height: 1.6;}
.service-card ul {
  font-size: 0.8125rem; /* 13px */
  margin-top: 0.75rem;
  padding-left: 1.2em; /* For bullets */
  color: var(--brand-text-light); /* Bullets and text same color */
}
.service-card ul li { margin-bottom: 0.3rem; }
.service-card ul li::marker { color: var(--brand-blue); font-size: 0.8em;} /* Blue bullets */
.service-card .ai-explainer-trigger {
  font-size: 0.875rem;
  font-weight: 600; /* ★★★ INCREASED font-weight for accessibility ★★★ */
  color: var(--brand-accent);
  transition: opacity 0.2s ease-in-out;
}
.service-card .ai-explainer-trigger:hover { opacity: 0.8; }
.service-card .ai-explainer-trigger i { font-size: 0.85em; vertical-align: middle; margin-left: 0.2rem;}

/* --- "Why AyanTech" Section --- */
#why-ayantech {
    padding-top: 6rem; padding-bottom: 6rem; /* Standard padding */
    background-color: var(--brand-bg-soft);
}
#why-ayantech .text-sm.uppercase {
    color: var(--brand-accent); font-weight: 600; letter-spacing: 0.06em; font-size: 0.8125rem;
}
#why-ayantech h2 {
    font-size: clamp(2rem, 5vw, 2.75rem); /* Match other section heads */
    line-height: 1.2;
}
#why-ayantech .text-lg { font-size: 1.0625rem; color: var(--brand-text); line-height: 1.7; }
#why-ayantech p.leading-relaxed:not(.text-lg) { font-size: 0.9375rem; color: var(--brand-text-light); line-height: 1.65; }
#why-ayantech ul li {
    font-size: 0.9375rem;
    color: var(--brand-text-light);
    display: flex; /* For icon alignment */
    align-items: flex-start; /* Aligns icon with top of text */
    gap: 0.65rem; /* Space between icon and text */
    margin-bottom: 0.75rem; /* Space between list items */
}
#why-ayantech ul li i {
    color: var(--brand-blue);
    font-size: 1.05rem; /* Slightly larger icon */
    margin-top: 0.125em; /* Fine-tune vertical alignment of icon */
}
#why-ayantech ul li strong { color: var(--brand-text); font-weight: 500; }
#why-ayantech img { border-radius: 0.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }

/* --- "Real Stories" (Testimonials) Section --- */
#real-stories {
    padding-top: 6rem; padding-bottom: 6rem;
    background-color: var(--section-bg-white);
}
#real-stories > .container > .text-center > h2 { font-size: clamp(2rem, 5vw, 2.75rem); }
#real-stories > .container > .text-center > p { font-size: clamp(1.05rem, 2.5vw, 1.1875rem); color: var(--brand-text-light); max-width: 620px; margin-left: auto; margin-right: auto;}
#testimonial-container > div {
    background-color: var(--brand-bg-soft);
    padding: 2rem 2.25rem; /* More horizontal padding */
    border-radius: 0.5rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
    border: 1px solid var(--border-color-light);
}
#testimonial-container p.italic { font-size: 1.0625rem; line-height: 1.75; color: var(--brand-text); margin-bottom: 1.25rem; }
#testimonial-container img {
    width: 3.25rem; height: 3.25rem;
    border-radius: 50%; /* ★★★ CHANGED for circular avatars ★★★ */
    border: 2px solid var(--brand-accent); /* ★★★ ADDED border-width ★★★ */
    object-fit: cover; /* ★★★ ADDED for aspect ratio ★★★ */
}
#testimonial-container .font-semibold { font-size: 0.9375rem; color: var(--brand-text); }
#testimonial-container .text-sm { font-size: 0.8125rem; color: var(--brand-text-light); }
#real-stories .text-sm.uppercase { font-size: 0.875rem; color: var(--brand-text-light); letter-spacing: 0.05em; margin-bottom: 1.75rem !important;} /* Keep !important if it's crucial for layout from CMS or similar */
#real-stories .opacity-75 { opacity: 0.65; } /* Client logos */

/* --- "Lead Magnet" Section --- */
#lead-magnet {
    padding-top: 4.5rem; padding-bottom: 4.5rem;
    background-color: var(--brand-blue-light); /* Uses the defined light blue */
}
#lead-magnet h3 {
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    color: var(--brand-text);
    font-family: var(--font-display); /* ★★★ CHANGED to display font per image ★★★ */
    font-weight: 600; /* Adjusted from 700 default for H1/H2 if H3 is used */
}
#lead-magnet p { color: var(--brand-text-light); font-size: 1rem; }
#lead-magnet strong { font-size: 1.125rem; color: var(--brand-blue); font-weight: 600; }
#lead-magnet input[type="email"] {
    padding: 0.8rem 1.1rem; border-radius: 0.375rem; border: 1px solid #c8d3e8; font-size: 0.9375rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
#lead-magnet input[type="email"]:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(74, 114, 177, 0.15); }
#lead-magnet button[type="submit"] { /* Matches hero button */
    background-color: var(--brand-blue); color: white; padding: 0.8rem 2.5rem;
    font-size: 0.9375rem; font-weight: 500; border-radius: 9999px;
    box-shadow: 0 4px 10px rgba(74, 114, 177, 0.2);
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
#lead-magnet button[type="submit"]:hover { background-color: var(--brand-blue-darker); box-shadow: 0 6px 12px rgba(74, 114, 177, 0.25); }

/* --- "Let's Talk" (Final CTA) Section --- */
#lets-talk {
    padding-top: 5.5rem; padding-bottom: 6.5rem;
    background-color: var(--brand-blue);
}
#lets-talk h2 {
    font-size: clamp(2.25rem, 5.5vw, 3.25rem); /* Very large */
    color: white; font-weight: 700; line-height: 1.15;
}
#lets-talk > .container > p { /* Sub-heading */
    font-size: clamp(1.05rem, 2.5vw, 1.25rem); color: rgba(255,255,255,0.85); max-width: 680px;
    margin-left: auto; margin-right: auto; /* Ensure centered */
}
#demo-form input, #demo-form textarea {
    background-color: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
    color: white; padding: 0.9rem 1.1rem; border-radius: 0.375rem; font-size: 0.9375rem;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
#demo-form input::placeholder, #demo-form textarea::placeholder { color: rgba(255,255,255,0.55); }
#demo-form input:focus, #demo-form textarea:focus {
    background-color: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.45);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}
#demo-form .form-next-btn, #demo-form #submit-demo-form {
    background-color: var(--brand-accent); color: var(--brand-text); /* Dark text on accent */
    font-weight: 600; padding: 0.875rem 2.5rem; border-radius: 9999px;
    font-size: 1rem; box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#demo-form .form-next-btn:hover, #demo-form #submit-demo-form:hover {
    opacity: 0.9; /* Slight hover effect */
}
#demo-form .form-prev-btn {
    border: 1px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.9);
    padding: 0.875rem 2rem; border-radius: 9999px; font-size: 1rem; font-weight: 500;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
#demo-form .form-prev-btn:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.55);
}
#demo-form .form-checkbox:checked { background-color: var(--brand-accent) !important; border-color: var(--brand-accent) !important; } /* !important often needed for custom checkbox states */
#demo-form label.flex { color: rgba(255,255,255,0.9); font-size: 0.875rem; }
#demo-form p.text-xs { color: rgba(255,255,255,0.8); }

/* --- Footer --- */
footer {
    background-color: var(--footer-bg); color: var(--footer-text);
    padding-top: 4rem; padding-bottom: 3rem; font-size: 0.875rem;
}
footer .logo-text { font-size: 1.625rem; color: white; font-weight: 700;}
footer .logo-text span { font-weight: 400; color: var(--brand-accent); } /* Gold accent for "Tech" */
footer h5 {
    font-size: 0.875rem; /* Smaller footer headings */
    color: var(--footer-heading); font-weight: 500; margin-bottom: 0.875rem;
    text-transform: uppercase; letter-spacing: 0.06em;
}
footer ul li { margin-bottom: 0.35rem; }
footer ul li a { color: var(--footer-text); transition: color 0.2s ease-in-out; }
footer ul li a:hover { color: var(--brand-accent); }
footer .border-t { border-color: rgba(255,255,255,0.1); padding-top: 1.75rem; margin-top: 1.75rem;}
footer .text-xs p { color: var(--footer-text); font-size: 0.8125rem; }
footer .text-xs a { color: var(--footer-text); font-size: 0.8125rem; transition: color 0.2s ease-in-out; }
footer .text-xs a:hover { color: white; }

/* --- Modal & Chatbot styles (Ensure consistency) --- */
#ai-explainer-modal { /* Styles fine from previous if they match general aesthetic */ }
#chatbot-toggle-btn {
    background-color: var(--brand-blue);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Match other primary buttons */
    width: 3.5rem; height: 3.5rem; /* 56px */
    font-size: 1.625rem; /* Icon size */
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
#chatbot-toggle-btn:hover {
    background-color: var(--brand-blue-darker);
    transform: scale(1.05);
}
#chatbot-window { /* Styles fine from previous if they match general aesthetic */ }
/* ... other modal/chatbot styles from previous version, adjusted for color consistency if needed ... */

/* Remaining styles from previous version (animations, selections, scrollbar, form steps) are generally fine unless they conflict with new specific styles */
/* Selection Styles */
::selection { background-color: rgba(216, 160, 95, 0.25); color: #1f2937; }
/* Custom Scrollbar */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #e9e9e9; }
::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }

/* Animation Keyframes & Utilities (Keep from before) */
@keyframes fadeInSubtleCustom { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes slideUpGentleCustom { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseSlowCustom { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.025); opacity: 0.7; } } /* More subtle pulse */
@keyframes pulseSlowerCustom { 0%, 100% { transform: scale(1); opacity: 0.35); } 50% { transform: scale(1.015); opacity: 0.5; } }
.animate-fade-in-subtle-custom, .animate-slide-up-gentle-custom, .animate-on-scroll-custom { opacity: 0; }
.is-visible.animate-fade-in-subtle-custom { animation: fadeInSubtleCustom 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
.is-visible.animate-slide-up-gentle-custom { animation: slideUpGentleCustom 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }
.is-visible.animate-on-scroll-custom:not([data-animation-type]) { animation: fadeInSubtleCustom 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
.is-visible.animate-on-scroll-custom[data-animation-type="slideUpGentle-custom"] { animation: slideUpGentleCustom 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }
.animate-pulse-slow-custom { animation: pulseSlowCustom 11s infinite ease-in-out; }
.animate-pulse-slower-custom { animation: pulseSlowerCustom 13s infinite ease-in-out; }
.animation-delay-100-custom { animation-delay: 0.1s !important; }
.animation-delay-200-custom { animation-delay: 0.2s !important; }
.animation-delay-300-custom { animation-delay: 0.3s !important; }
.animation-delay-400-custom { animation-delay: 0.4s !important; }
.animation-delay-500-custom { animation-delay: 0.5s !important; }
.animation-delay-600-custom { animation-delay: 0.6s !important; }
.animation-delay-900-custom { animation-delay: 0.9s !important; }
.animation-delay-2000-custom { animation-delay: 2s !important; }

/* Component-Specific Styles */
/* .service-card:hover { transform: translateY(-4px); } - already defined */
:target { scroll-margin-top: 80px; /* Adjust based on final fixed header height */ }
.logo-text { user-select: none; }

/* Ensure required field error indication is visible */
#demo-form input.border-red-500, #demo-form textarea.border-red-500,
#lead-magnet-form input[type="email"].border-red-500 { /* More specific for lead magnet */
    border-color: #f56565 !important; /* Tailwind's red-500 */
    box-shadow: 0 0 0 2px rgba(245, 101, 101, 0.3);
}