/*
  ========================================
  AIchemist Agency - Definitive Stylesheet
  Version: Mystical Tech Theme
  ========================================
*/

/* --- FONT IMPORT --- */
@import url('https://rsms.me/inter/inter.css');

/* --- THEME & GLOBAL VARIABLES --- */
:root {
  /* Color Palette (Mystical Tech Theme) */
  --color-background: #0a092d;        /* Deep Indigo/Void */
  --color-surface-dark: #100f3a;      /* Slightly lighter deep blue */

  --color-text-light: #ffffff;
  --color-text-base: #c0c5f0;          /* Light lavender gray */
  --color-text-subtle: #8085c0;        /* Muted indigo */

  /* Primary Accents (Electric Blue -> Mystical Purple) */
  --color-accent-primary: #6366f1;        /* Electric Blue/Indigo */
  --color-accent-primary-light: #818cf8;    /* Lighter Indigo */
  --color-accent-secondary: #8b5cf6;      /* Mystical Purple/Violet */
  --color-accent-secondary-light: #c4b5fd;    /* Light Lavender */

  /* Functional & Tertiary Accents */
  --color-accent-success: #22c55e;        /* Green for success outcomes */
  --color-accent-success-light: #86efac;
  --color-accent-problem: #ec4899;        /* Electric Pink for 'problem' */
  --color-accent-problem-light: #f9a8d4;
  --color-accent-tertiary: #22d3ee;       /* Cyan for variety */

  --color-border-muted: rgba(99, 102, 241, 0.2);   /* Based on primary accent */
  --color-border-subtle: rgba(99, 102, 241, 0.3);
  --color-border-hover: rgba(99, 102, 241, 0.4);
  --color-border-dark: #2a2f4c; /* Dark desaturated blue for footer */

  /* Typography */
  --font-sans: 'Inter', sans-serif;
}

/* --- GLOBAL RESET & BASE STYLES --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font-sans);
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-background);
  color: var(--color-text-light);
  min-height: 100vh;
}

button, a {
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
}

a { text-decoration: none; }

ul { list-style: none; }

/* --- LAYOUT & HELPERS --- */
.hidden { display: none; }
.max-w-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.max-w-4xl { max-width: 56rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.max-w-3xl { max-width: 48rem; margin-left: auto; margin-right: auto; }
.page-view { padding-top: 3rem; }

/* --- HEADER & NAVIGATION --- */
.header {
  background-color: rgba(10, 9, 45, 0.9); /* Updated to match new bg */
  backdrop-filter: blur(1rem);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
  border-bottom: 1px solid var(--color-border-subtle);
}
.nav { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; padding-bottom: 1rem; }
.logo-container { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.logo-img { height: 2.5rem; width: 2.5rem; border-radius: 0.5rem; }
.logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  transition: color 0.2s;
}
.logo-container:hover .logo-text {
  color: var(--color-accent-secondary);
}
.nav-links-desktop { display: none; }
.nav-link { color: var(--color-text-light); transition: color 0.2s; }
.nav-link:hover { color: var(--color-accent-secondary); }
.nav-link.active { color: var(--color-accent-secondary); }
.cta-button-desktop { display: none; }
.cta-button {
  background-image: linear-gradient(to right, var(--color-accent-primary), var(--color-accent-secondary));
  color: var(--color-text-light);
  border-radius: 9999px;
  font-weight: 600;
  transition: box-shadow 0.2s;
}
.cta-button:hover { box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); }
#mobile-menu-button { display: block; }
#mobile-menu {
  background-color: rgba(10, 9, 45, 0.9);
  backdrop-filter: blur(1rem);
  border-top: 1px solid var(--color-border-subtle);
  padding: 1.5rem 1rem;
}
#mobile-menu .nav-link { display: block; width: 100%; text-align: left; padding: 0.5rem 0; }
#mobile-menu .cta-button { display: block; padding: 0.75rem 1.5rem; margin-top: 1rem; }

/* --- HERO SECTION --- */
.hero-section { min-height: 60vh; display: flex; align-items: center; position: relative; overflow: hidden; }
.hero-gradient-bg { position: absolute; inset: 0; background-image: linear-gradient(to bottom right, rgba(99, 102, 241, 0.1), transparent, rgba(139, 92, 246, 0.1)); }
.hero-content { position: relative; z-index: 10; padding-top: 1rem; padding-bottom: 1rem; }
.hero-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: start;
}
.hero-tagline-badge { display: inline-flex; align-items: center; gap: 0.5rem; background-color: rgba(99, 102, 241, 0.2); color: var(--color-accent-primary-light); padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; margin-bottom: 1.5rem; }
.text-hero {
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.25;
  margin-bottom: 1.5rem;
}
.hero-text-gradient { background-image: linear-gradient(to right, var(--color-accent-primary), var(--color-accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-subtext { font-size: 1.125rem; line-height: 1.75; color: var(--color-text-base); margin-bottom: 2rem; }
.metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 2rem; }
.metric-card { text-align: center; padding: 0.75rem; background-color: rgba(255, 255, 255, 0.05); border-radius: 0.75rem; border: 1px solid var(--color-border-muted); transition: border-color 0.2s; }
.metric-card:hover { border-color: var(--color-border-hover); }
.metric-value { font-size: 1.25rem; font-weight: 700; color: var(--color-accent-primary); }
.metric-label { font-size: 0.75rem; color: var(--color-accent-secondary); }
.hero-cta-button { background-image: linear-gradient(to right, var(--color-accent-primary), var(--color-accent-secondary)); color: var(--color-text-light); padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-weight: 700; font-size: 1rem; transition: box-shadow 0.2s; display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; }
.hero-cta-button:hover { box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4); }
.hero-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

/* --- ROI CALCULATOR --- */
.roi-calculator { background-color: rgba(255, 255, 255, 0.05); backdrop-filter: blur(1rem); border: 1px solid var(--color-border-muted); border-radius: 1rem; padding: 1.5rem; }
.roi-calculator-title { font-size: 1.25rem; font-weight: 700; color: var(--color-accent-primary); text-align: center; margin-bottom: 1.5rem; }
.roi-input-label { display: block; color: var(--color-accent-secondary); font-weight: 500; margin-bottom: 0.5rem; font-size: 0.875rem; }
.roi-input { width: 100%; padding: 0.75rem; background-color: rgba(0, 0, 0, 0.5); border: 1px solid #2a2f4c; border-radius: 0.5rem; color: var(--color-text-light); font-size: 0.875rem; }
.roi-input:focus { border-color: var(--color-accent-primary); outline: none; }
.roi-result-box { background-image: linear-gradient(to right, var(--color-accent-primary), var(--color-accent-secondary)); color: var(--color-text-light); padding: 1rem; border-radius: 0.75rem; text-align: center; }
.roi-result-value { font-size: 1.875rem; font-weight: 700; margin-bottom: 0.5rem; }
.roi-result-label { font-weight: 600; font-size: 0.875rem; }
.roi-cta-button { background-color: rgba(0,0,0,0.3); border: 1px solid rgba(99, 102, 241, 0.4); padding: 0.75rem 1.5rem; border-radius: 0.5rem; width: 100%; transition: background-color 0.2s; font-size: 0.875rem; }
.roi-cta-button:hover { background-color: rgba(99, 102, 241, 0.1); }

/* --- GENERIC SECTIONS & CARDS --- */
.section { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.section-dark { background-color: var(--color-surface-dark); }
.section-title { font-size: 2.25rem; font-weight: 700; text-align: center; margin-bottom: 1.5rem; }
.three-col-grid { display: grid; gap: 2rem; }
.feature-card { background-color: rgba(255, 255, 255, 0.05); padding: 2rem; border-radius: 1rem; border: 1px solid var(--color-border-muted); transition: all 0.3s; }
.feature-card:hover { border-color: var(--color-border-hover); transform: translateY(-0.5rem); }
.feature-card-icon-box { width: 4rem; height: 4rem; background-image: linear-gradient(to right, var(--color-accent-primary), var(--color-accent-secondary)); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.feature-card-title { font-size: 1.25rem; font-weight: 700; color: var(--color-accent-primary); margin-bottom: 1rem; }
.feature-card-text { color: var(--color-text-base); }
.problem-solution-grid { display: grid; gap: 3rem; }
.problem-box { border-left: 4px solid var(--color-accent-problem); padding-left: 2rem; }
.solution-box { border-left: 4px solid var(--color-accent-success); padding-left: 2rem; }
.problem-solution-title { font-size: 1.875rem; font-weight: 700; margin-bottom: 1.5rem; }
.problem-title { color: var(--color-accent-problem-light); }
.solution-title { color: var(--color-accent-success); }
.problem-solution-text { color: var(--color-text-base); font-size: 1.125rem; line-height: 1.75; }

/* --- SOLUTIONS PAGE --- */
.four-col-grid { display: grid; gap: 2rem; }
.solution-card { background-color: rgba(255, 255, 255, 0.05); border-radius: 1rem; padding: 2rem; border: 1px solid var(--color-border-muted); display: flex; flex-direction: column; }
.solution-card-icon-box { width: 4rem; height: 4rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.solution-card-title { font-size: 1.5rem; font-weight: 700; color: var(--color-accent-primary); margin-bottom: 1rem; }
.solution-card-text {
    color: var(--color-text-subtle);
    margin-bottom: 1.5rem;
}
.solution-card-subtle {
  color: var(--color-text-subtle);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}
.solution-outcome-box { margin-top: auto; background-color: rgba(34, 197, 94, 0.2); color: var(--color-accent-success-light); padding: 1rem; border-radius: 0.5rem; font-size: 0.875rem; }
.integrations-box { background-image: linear-gradient(to right, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); border-radius: 1rem; padding: 2rem; border: 1px solid var(--color-border-subtle); }
.integrations-text { text-align: center; color: var(--color-text-base); }

/* --- PROCESS & RESULTS PAGES --- */
.phase-card { background-color: rgba(255, 255, 255, 0.05); border-radius: 1rem; padding: 2rem; border: 1px solid var(--color-border-muted); }
.phase-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.phase-number { width: 4rem; height: 4rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; }
.phase-title { font-size: 1.5rem; font-weight: 700; color: var(--color-accent-primary); }
.phase-subtext { color: var(--color-text-subtle); }
.phase-grid { display: grid; gap: 2rem; }
.phase-deliverables-title, .phase-outcome-title { font-weight: 600; color: var(--color-text-light); margin-bottom: 1rem; }
.phase-deliverables-list { display: flex; flex-direction: column; gap: 0.5rem; color: var(--color-text-base); }
.phase-deliverables-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.phase-deliverables-item svg {
    flex-shrink: 0;
}
.phase-outcome-text { color: var(--color-accent-success); }
.results-card { background-color: rgba(255, 255, 255, 0.05); padding: 2rem; border-radius: 1rem; border: 1px solid var(--color-border-muted); }
.results-card-text { color: var(--color-text-base); margin-bottom: 1rem; }
.results-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.results-list-item svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}
.results-list-item span {}
.success-indicators-card { background-color: rgba(255, 255, 255, 0.05); padding: 2rem; border-radius: 1rem; border: 1px solid var(--color-border-muted); }
.success-indicators-grid { display: grid; gap: 2rem; }
.success-list-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.success-list { display: flex; flex-direction: column; gap: 0.75rem; }

/* --- CONTACT PAGE --- */
.contact-form-card { background-color: rgba(255, 255, 255, 0.05); backdrop-filter: blur(1rem); border: 1px solid var(--color-border-muted); border-radius: 1rem; padding: 2rem; }
.contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-form-grid { display: grid; gap: 1.5rem; }
.contact-form-label { display: block; color: var(--color-accent-secondary); font-weight: 500; margin-bottom: 0.5rem; }
.contact-form-input { width: 100%; padding: 1rem; background-color: rgba(0, 0, 0, 0.5); border: 1px solid #2a2f4c; border-radius: 0.5rem; color: var(--color-text-light); }
.contact-form-input:focus { border-color: var(--color-accent-primary); outline: none; }
.contact-form-select { appearance: none; }
.contact-form-select-wrapper { position: relative; }
.contact-form-select-arrow { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-text-subtle); }
.contact-form-button { background-image: linear-gradient(to right, var(--color-accent-primary), var(--color-accent-secondary)); color: var(--color-text-light); padding: 1rem 2rem; border-radius: 0.75rem; font-weight: 700; font-size: 1.125rem; transition: box-shadow 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.contact-form-button:hover { box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4); }
.contact-form-button:disabled { opacity: 0.7; cursor: not-allowed; }

/* --- FOOTER --- */
.footer { background-color: var(--color-surface-dark); padding-top: 3rem; padding-bottom: 3rem; border-top: 1px solid var(--color-border-muted); }
.footer-grid { display: grid; gap: 2rem; margin-bottom: 2rem; }
.footer-title { font-weight: 600; margin-bottom: 1rem; color: var(--color-text-light); }
.footer-links { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text-subtle); }
.footer-links a, .footer-links button { transition: color 0.2s; }
.footer-links a:hover, .footer-links button:hover { color: var(--color-text-light); }
.footer-bottom { border-top: 1px solid var(--color-border-dark); padding-top: 2rem; text-align: center; font-size: 0.875rem; color: var(--color-text-subtle); }

/* --- RESPONSIVE STYLES (Media Queries) --- */
@media (min-width: 768px) { /* md breakpoint */
  .nav-links-desktop { display: flex; align-items: center; gap: 2rem; }
  .cta-button-desktop { display: block; padding: 0.5rem 1.5rem; }
  #mobile-menu-button { display: none; }
  .metrics-grid { grid-template-columns: repeat(4, 1fr); }
  .three-col-grid { grid-template-columns: repeat(3, 1fr); }
  .four-col-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .phase-grid { grid-template-columns: repeat(2, 1fr); }
  .success-indicators-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
  }
  .contact-form-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) { /* lg breakpoint */
  .hero-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-subtext { font-size: 1.25rem; }
  .hero-features { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
  .text-hero { font-size: 3rem; } /* lg:text-5xl */
  .roi-calculator { position: sticky; top: 6rem; padding: 2rem; }
  .roi-input-label, .roi-input, .roi-result-label { font-size: 1rem; }
  .roi-result-value { font-size: 2.25rem; }
  .four-col-grid { grid-template-columns: repeat(4, 1fr); }
  .problem-solution-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) { /* xl breakpoint */
    .text-hero { font-size: 3.75rem; } /* xl:text-6xl */
}

@media (max-width: 768px) { /* Adjust breakpoint as needed */
    .success-indicators-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
    }
}

@media (max-width: 992px) { /* Adjust this breakpoint as needed */
    .hero-grid {
        grid-template-columns: 1fr; /* Switch to a single column */
    }
    .hero-grid > div:first-child {
        margin-bottom: 2rem;
    }
}