/* ============================================================
   AART INFRA — MAIN.CSS
   Full custom styles for all homepage sections & components
   ============================================================ */

/* ── GLOBAL UTILITIES ────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

.ai-container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.ai-container--wide {
  max-width: var(--container-wide);
}

.ai-section {
  padding: var(--section-pad) 0;
}

.ai-section--dark {
  background-color: var(--ai-navy);
  color: var(--ai-white);
}

.ai-section--cream {
  background-color: var(--ai-cream);
}

.ai-section--cream-dark {
  background-color: var(--ai-cream-dark);
}

/* Section Header */
.ai-section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}

.ai-section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ai-gold);
  margin-bottom: 14px;
}

.ai-section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 600;
  color: var(--ai-navy);
  margin: 0 0 18px;
  line-height: 1.2;
}

.ai-section--dark .ai-section-title,
.ai-section--dark .ai-section-header p {
  color: var(--ai-white);
}

.ai-section-header p {
  font-size: 1.05rem;
  color: var(--ai-gray);
  line-height: 1.75;
  margin: 0;
}

.ai-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--ai-gold), var(--ai-gold-light));
  margin: 0 auto 24px;
  border-radius: 2px;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */

.ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.ai-btn--primary {
  background: var(--ai-gold);
  color: var(--ai-navy);
  border-color: var(--ai-gold);
}

.ai-btn--primary:hover {
  background: var(--ai-gold-dark);
  border-color: var(--ai-gold-dark);
  color: var(--ai-navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.ai-btn--outline {
  background: transparent;
  color: var(--ai-white);
  border-color: rgba(255,255,255,0.5);
}

.ai-btn--outline:hover {
  background: var(--ai-white);
  color: var(--ai-navy);
  border-color: var(--ai-white);
}

.ai-btn--outline-dark {
  background: transparent;
  color: var(--ai-navy);
  border-color: var(--ai-navy);
}

.ai-btn--outline-dark:hover {
  background: var(--ai-navy);
  color: var(--ai-white);
}

.ai-btn--white {
  background: var(--ai-white);
  color: var(--ai-navy);
  border-color: var(--ai-white);
}

.ai-btn--white:hover {
  background: var(--ai-cream);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ── HERO BANNER ─────────────────────────────────────────────── */

.ai-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ai-navy);
}

/* CSS-only crossfade slideshow */
.ai-hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ai-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  animation: heroFade 21s infinite;
  will-change: opacity, transform;
  transform: scale(1.06);
}

.ai-hero__slide--1 { animation-delay: 0s; }
.ai-hero__slide--2 { animation-delay: 7s; }
.ai-hero__slide--3 { animation-delay: 14s; }

@keyframes heroFade {
  0%         { opacity: 0;   transform: scale(1.06); }
  7%         { opacity: 1;   transform: scale(1);    }
  28%        { opacity: 1;   transform: scale(1);    }
  33%        { opacity: 0;   transform: scale(1.06); }
  100%       { opacity: 0;   transform: scale(1.06); }
}

/* Fallback: keep old .ai-hero__bg for backward-compat with other templates */
.ai-hero__bg {
  position: absolute;
  inset: 0;
  background: url('') center/cover no-repeat;
  z-index: 0;
}

.ai-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    110deg,
    rgba(11, 29, 53, 0.90) 35%,
    rgba(11, 29, 53, 0.55) 100%
  );
}

/* Geometric accent lines */
.ai-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(135deg, transparent 50%, rgba(200,169,110,0.06) 50%);
  pointer-events: none;
  z-index: 2;
}

.ai-hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 120px 20px 80px;
}

.ai-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(200,169,110,0.15);
  border: 1px solid rgba(200,169,110,0.3);
  border-radius: 2px;
  padding: 8px 18px;
  margin-bottom: 28px;
}

.ai-hero__badge span {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ai-gold-light);
}

.ai-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ai-gold);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.ai-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  font-weight: 600;
  color: var(--ai-white);
  line-height: 1.1;
  max-width: 780px;
  margin: 0 0 24px;
}

.ai-hero__title em {
  font-style: italic;
  color: var(--ai-gold);
}

.ai-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255,255,255,0.78);
  line-height: 1.75;
  max-width: 580px;
  margin: 0 0 40px;
}

.ai-hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ai-hero__stats {
  display: flex;
  gap: 0;
  margin-top: 70px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(200,169,110,0.2);
  border-radius: 2px;
  max-width: 680px;
}

.ai-hero__stat {
  flex: 1;
  padding: 22px 24px;
  border-right: 1px solid rgba(200,169,110,0.15);
  text-align: center;
}

.ai-hero__stat:last-child { border-right: none; }

.ai-hero__stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ai-gold);
  line-height: 1;
  margin-bottom: 4px;
}

.ai-hero__stat-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

/* ── ABOUT SECTION ───────────────────────────────────────────── */

.ai-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.ai-about__image-wrap {
  position: relative;
}

.ai-about__image-wrap img {
  width: 100%;
  border-radius: 2px;
  box-shadow: var(--shadow-lg);
}

.ai-about__image-accent {
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 160px;
  height: 160px;
  border: 3px solid var(--ai-gold);
  border-radius: 2px;
  z-index: -1;
}

.ai-about__experience-badge {
  position: absolute;
  top: 30px;
  left: -24px;
  background: var(--ai-navy);
  border: 2px solid var(--ai-gold);
  padding: 18px 22px;
  text-align: center;
  border-radius: 2px;
}

.ai-about__experience-badge .years {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--ai-gold);
  line-height: 1;
}

.ai-about__experience-badge .text {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ai-white);
  margin-top: 4px;
}

.ai-about__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ai-gold);
  display: block;
  margin-bottom: 12px;
}

.ai-about__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600;
  color: var(--ai-navy);
  margin: 0 0 20px;
  line-height: 1.2;
}

.ai-about__text {
  color: var(--ai-gray);
  line-height: 1.85;
  font-size: 1rem;
  margin-bottom: 16px;
}

.ai-about__values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0 36px;
}

.ai-about__value-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ai-charcoal);
}

.ai-about__value-item::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ai-gold);
  flex-shrink: 0;
}

/* ── WHY CHOOSE US ───────────────────────────────────────────── */

.ai-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.ai-feature-card {
  background: var(--ai-white);
  border-radius: 2px;
  padding: 36px 32px;
  border: 1px solid var(--ai-cream-dark);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.ai-feature-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ai-gold), var(--ai-gold-light));
  transform: scaleX(0);
  transition: transform var(--transition);
  transform-origin: left;
}

.ai-feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.ai-feature-card:hover::before {
  transform: scaleX(1);
}

.ai-feature-card__icon {
  width: 56px;
  height: 56px;
  background: var(--ai-cream);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: background var(--transition);
}

.ai-feature-card:hover .ai-feature-card__icon {
  background: var(--ai-gold);
}

.ai-feature-card__icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--ai-navy);
  fill: none;
  stroke-width: 1.5;
  transition: stroke var(--transition);
}

.ai-feature-card:hover .ai-feature-card__icon svg {
  stroke: var(--ai-navy);
}

.ai-feature-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ai-navy);
  margin: 0 0 12px;
}

.ai-feature-card__text {
  font-size: 0.92rem;
  color: var(--ai-gray);
  line-height: 1.75;
  margin: 0;
}

/* ── PROJECTS SECTION ────────────────────────────────────────── */

.ai-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
}

.ai-project-card {
  background: var(--ai-white);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  position: relative;
}

.ai-project-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.ai-project-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--ai-cream-dark);
}

.ai-project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.ai-project-card:hover .ai-project-card__image img {
  transform: scale(1.05);
}

.ai-project-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--ai-gold);
  color: var(--ai-navy);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
}

.ai-project-card__badge--new {
  background: #16a34a;
  color: var(--ai-white);
}

.ai-project-card__body {
  padding: 28px;
}

.ai-project-card__type {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ai-gold);
  margin-bottom: 8px;
}

.ai-project-card__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ai-navy);
  margin: 0 0 6px;
}

.ai-project-card__location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ai-gray);
  margin-bottom: 16px;
}

.ai-project-card__location svg {
  width: 14px;
  height: 14px;
  stroke: var(--ai-gold);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.ai-project-card__meta {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--ai-cream-dark);
  padding-top: 16px;
  margin-bottom: 20px;
}

.ai-project-card__meta-item {
  flex: 1;
  text-align: center;
  padding: 0 8px;
  border-right: 1px solid var(--ai-cream-dark);
}

.ai-project-card__meta-item:last-child { border-right: none; }

.ai-project-card__meta-item .meta-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ai-navy);
}

.ai-project-card__meta-item .meta-label {
  display: block;
  font-size: 0.7rem;
  color: var(--ai-gray);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.ai-project-card__actions {
  display: flex;
  gap: 10px;
}

.ai-project-card__actions .ai-btn {
  flex: 1;
  justify-content: center;
  padding: 10px 16px;
  font-size: 0.78rem;
}

/* Zotik Hills — Featured Hero Card */
.ai-project-featured {
  background: var(--ai-navy);
  border-radius: 2px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 500px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 40px;
}

.ai-project-featured__image {
  position: relative;
  overflow: hidden;
}

.ai-project-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.ai-project-featured:hover .ai-project-featured__image img {
  transform: scale(1.04);
}

.ai-project-featured__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11,29,53,0.3), transparent);
}

.ai-project-featured__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--ai-gold);
  color: var(--ai-navy);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 2px;
}

.ai-project-featured__content {
  padding: 50px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ai-project-featured__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ai-gold);
  margin-bottom: 14px;
}

.ai-project-featured__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--ai-white);
  margin: 0 0 8px;
  line-height: 1.1;
}

.ai-project-featured__subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 28px;
}

.ai-project-featured__highlights {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-project-featured__highlights li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.82);
}

.ai-project-featured__highlights li::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--ai-gold);
  flex-shrink: 0;
}

.ai-project-featured__meta {
  display: flex;
  gap: 24px;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ai-project-featured__meta-item .label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 4px;
}

.ai-project-featured__meta-item .value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ai-gold);
}

.ai-project-featured__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── INVESTMENT BENEFITS ──────────────────────────────────────── */

.ai-benefits {
  background: var(--ai-navy);
  position: relative;
  overflow: hidden;
}

.ai-benefits::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,169,110,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.ai-benefits__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.ai-benefits__content .ai-section-title {
  color: var(--ai-white);
  text-align: left;
}

.ai-benefits__content p {
  color: rgba(255,255,255,0.65);
  line-height: 1.85;
  font-size: 1rem;
  margin-bottom: 16px;
}

.ai-benefits__list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ai-benefits__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.82);
}

.ai-benefits__list-icon {
  width: 32px;
  height: 32px;
  background: rgba(200,169,110,0.12);
  border: 1px solid rgba(200,169,110,0.25);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-benefits__list-icon svg {
  width: 15px;
  height: 15px;
  stroke: var(--ai-gold);
  fill: none;
  stroke-width: 2;
}

.ai-benefits__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ai-benefit-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,169,110,0.15);
  border-radius: 2px;
  padding: 28px 24px;
  transition: all var(--transition);
}

.ai-benefit-card:hover {
  background: rgba(200,169,110,0.08);
  border-color: rgba(200,169,110,0.35);
  transform: translateY(-3px);
}

.ai-benefit-card__number {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ai-gold);
  line-height: 1;
  margin-bottom: 8px;
}

.ai-benefit-card__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ai-white);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.ai-benefit-card__text {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
}

/* ── TESTIMONIALS ─────────────────────────────────────────────── */

.ai-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}

.ai-testimonial-card {
  background: var(--ai-white);
  border-radius: 2px;
  padding: 36px 32px;
  border: 1px solid var(--ai-cream-dark);
  position: relative;
  transition: all var(--transition);
}

.ai-testimonial-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.ai-testimonial-card__quote {
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--ai-gold);
  line-height: 0.6;
  margin-bottom: 20px;
  opacity: 0.4;
}

.ai-testimonial-card__text {
  font-size: 0.98rem;
  color: var(--ai-charcoal);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 28px;
}

.ai-testimonial-card__stars {
  display: flex;
  gap: 3px;
  margin-bottom: 20px;
}

.ai-testimonial-card__stars svg {
  width: 16px;
  height: 16px;
  fill: var(--ai-gold);
  stroke: none;
}

.ai-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--ai-cream-dark);
  padding-top: 20px;
}

.ai-testimonial-card__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ai-cream-dark);
  flex-shrink: 0;
  overflow: hidden;
}

.ai-testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-testimonial-card__name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ai-navy);
}

.ai-testimonial-card__role {
  font-size: 0.78rem;
  color: var(--ai-gray);
  margin-top: 2px;
}

/* ── CONTACT CTA ──────────────────────────────────────────────── */

.ai-cta {
  background: var(--ai-navy);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.ai-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(200,169,110,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(200,169,110,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.ai-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}

.ai-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--ai-white);
  margin: 0 0 18px;
  font-weight: 600;
}

.ai-cta__text {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  margin-bottom: 40px;
}

.ai-cta__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── CONTACT FORM MODAL ───────────────────────────────────────── */

.ai-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11,29,53,0.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ai-modal-overlay.active {
  display: flex;
}

.ai-modal {
  background: var(--ai-white);
  border-radius: 2px;
  max-width: 540px;
  width: 100%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.35s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.ai-modal__header {
  background: var(--ai-navy);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-modal__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ai-white);
  margin: 0;
}

.ai-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  font-size: 1.5rem;
  line-height: 1;
  padding: 4px;
  transition: color var(--transition);
}

.ai-modal__close:hover { color: var(--ai-white); }

.ai-modal__body {
  padding: 36px 32px;
}

.ai-form__group {
  margin-bottom: 20px;
}

.ai-form__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai-navy);
  margin-bottom: 8px;
}

.ai-form__input,
.ai-form__select,
.ai-form__textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--ai-gray-light);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ai-charcoal);
  background: var(--ai-white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.ai-form__input:focus,
.ai-form__select:focus,
.ai-form__textarea:focus {
  border-color: var(--ai-gold);
  box-shadow: 0 0 0 3px rgba(200,169,110,0.15);
}

.ai-form__textarea { resize: vertical; min-height: 100px; }

.ai-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ai-form__submit {
  width: 100%;
  padding: 15px;
  background: var(--ai-navy);
  color: var(--ai-white);
  border: none;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition);
}

.ai-form__submit:hover { background: var(--ai-gold); color: var(--ai-navy); }

.ai-form__success {
  background: #d1fae5;
  border: 1px solid #10b981;
  color: #065f46;
  padding: 14px 18px;
  border-radius: 2px;
  margin-top: 16px;
  display: none;
  font-size: 0.9rem;
}

/* ── FOOTER ───────────────────────────────────────────────────── */

.ai-footer {
  background: #07121f;
  padding: 70px 0 0;
}

.ai-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.ai-footer__brand-name {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ai-white);
  margin-bottom: 14px;
}

.ai-footer__brand-name span { color: var(--ai-gold); }

.ai-footer__brand-text {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.8;
  margin-bottom: 24px;
}

.ai-footer__socials {
  display: flex;
  gap: 10px;
}

.ai-footer__social-link {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.ai-footer__social-link:hover {
  background: var(--ai-gold);
  border-color: var(--ai-gold);
}

.ai-footer__social-link svg {
  width: 15px;
  height: 15px;
  fill: rgba(255,255,255,0.6);
  transition: fill var(--transition);
}

.ai-footer__social-link:hover svg { fill: var(--ai-navy); }

.ai-footer__col-title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ai-gold);
  margin: 0 0 22px;
}

.ai-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-footer__nav a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.45);
  transition: color var(--transition);
}

.ai-footer__nav a:hover { color: var(--ai-gold); }

.ai-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 12px;
}

.ai-footer__contact-item svg {
  width: 15px;
  height: 15px;
  stroke: var(--ai-gold);
  fill: none;
  stroke-width: 1.8;
  flex-shrink: 0;
  margin-top: 2px;
}

.ai-footer__bottom {
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ai-footer__copy {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.25);
}

.ai-footer__legal {
  display: flex;
  gap: 24px;
}

.ai-footer__legal a {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.25);
  transition: color var(--transition);
}

.ai-footer__legal a:hover { color: var(--ai-gold); }

/* ── PAGE HERO (inner pages) ─────────────────────────────────── */

.ai-page-hero {
  background: var(--ai-navy);
  padding: 100px 0 70px;
  position: relative;
  overflow: hidden;
}

.ai-page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ai-gold), transparent);
}

.ai-page-hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ai-gold);
  margin-bottom: 12px;
}

.ai-page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  color: var(--ai-white);
  margin: 0 0 16px;
  font-weight: 600;
}

.ai-page-hero__subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  max-width: 560px;
  line-height: 1.75;
}

/* ── MARQUEE TRUST STRIP (after hero, CSS-only infinite scroll) ─── */

.ai-marquee {
  overflow: hidden;
  background: var(--ai-navy-light);
  padding: 13px 0;
  border-top: 1px solid rgba(200,169,110,0.18);
  border-bottom: 1px solid rgba(200,169,110,0.18);
  position: relative;
  user-select: none;
}

/* Fade edge vignettes */
.ai-marquee::before,
.ai-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.ai-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--ai-navy-light) 0%, transparent 100%);
}

.ai-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--ai-navy-light) 0%, transparent 100%);
}

/* Track: inline-flex so it naturally sizes to its content width.
   All items are direct children — no inner wrappers.
   -50% translate = exactly one full set of items (seamless loop).    */
.ai-marquee__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: marqueeScroll 32s linear infinite;
  will-change: transform;
}

/* Critical: prevent flex from shrinking items */
.ai-marquee__item,
.ai-marquee__sep {
  flex-shrink: 0;
}

.ai-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.ai-marquee__item::before {
  content: '✓';
  color: var(--ai-gold);
  font-weight: 700;
  font-size: 0.8rem;
}

.ai-marquee__sep {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(200,169,110,0.35);
  vertical-align: middle;
}

@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pause marquee on reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .ai-marquee__track { animation: none; }
}

/* ── PROJECTS CTA FOOTER ──────────────────────────────────────── */

.ai-projects__cta {
  text-align: center;
  margin-top: 52px;
}

/* Screenshot image in featured project card */
.ai-project-featured__screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.8s ease;
}

.ai-project-featured:hover .ai-project-featured__screenshot {
  transform: scale(1.04);
}

/* ── CONTACT FORM 7 STYLING ──────────────────────────────────── */

.ai-cta--form {
  text-align: left;
}

.ai-cta__inner--wide {
  max-width: 860px;
  margin: 0 auto;
}

.ai-contact__header {
  text-align: center;
  margin-bottom: 44px;
}

.ai-contact__header .ai-cta__text {
  margin-bottom: 0;
}

/* CF7 wrapper resets & theme overrides */
.ai-cf7-wrapper {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,169,110,0.18);
  border-radius: 4px;
  padding: 40px 44px;
}

.ai-cf7-wrapper .wpcf7 {
  margin: 0;
  padding: 0;
}

/* Labels */
.ai-cf7-wrapper .wpcf7 label,
.ai-cf7-wrapper .wpcf7-form label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 8px;
}

/* Inputs / Selects / Textareas */
.ai-cf7-wrapper .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.ai-cf7-wrapper input[type="text"],
.ai-cf7-wrapper input[type="email"],
.ai-cf7-wrapper input[type="tel"],
.ai-cf7-wrapper input[type="url"],
.ai-cf7-wrapper input[type="number"],
.ai-cf7-wrapper textarea,
.ai-cf7-wrapper select {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid rgba(200,169,110,0.2);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ai-white);
  background: rgba(255,255,255,0.06);
  transition: border-color 0.25s, box-shadow 0.25s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  margin-bottom: 20px;
}

.ai-cf7-wrapper input[type="text"]::placeholder,
.ai-cf7-wrapper input[type="email"]::placeholder,
.ai-cf7-wrapper input[type="tel"]::placeholder,
.ai-cf7-wrapper textarea::placeholder {
  color: rgba(255,255,255,0.3);
}

.ai-cf7-wrapper input:focus,
.ai-cf7-wrapper textarea:focus,
.ai-cf7-wrapper select:focus {
  border-color: var(--ai-gold);
  box-shadow: 0 0 0 3px rgba(200,169,110,0.15);
}

.ai-cf7-wrapper textarea {
  resize: vertical;
  min-height: 110px;
}

.ai-cf7-wrapper select option {
  background: var(--ai-navy);
  color: var(--ai-white);
}

/* Submit button */
.ai-cf7-wrapper input[type="submit"],
.ai-cf7-wrapper .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 32px;
  background: var(--ai-gold);
  color: var(--ai-navy);
  border: 2px solid var(--ai-gold);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
  margin-top: 8px;
}

.ai-cf7-wrapper input[type="submit"]:hover,
.ai-cf7-wrapper .wpcf7-submit:hover {
  background: var(--ai-gold-dark);
  border-color: var(--ai-gold-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

/* CF7 validation messages */
.ai-cf7-wrapper .wpcf7-not-valid-tip {
  font-size: 0.78rem;
  color: #f87171;
  display: block;
  margin-top: -16px;
  margin-bottom: 14px;
}

.ai-cf7-wrapper .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 14px 18px;
  border-radius: 2px;
  font-size: 0.88rem;
  border: 1px solid;
}

.ai-cf7-wrapper .wpcf7-mail-sent-ok {
  background: rgba(16,185,129,0.1);
  border-color: #10b981;
  color: #6ee7b7;
}

.ai-cf7-wrapper .wpcf7-mail-sent-ng,
.ai-cf7-wrapper .wpcf7-spam-blocked,
.ai-cf7-wrapper .wpcf7-acceptance-missing {
  background: rgba(239,68,68,0.1);
  border-color: #ef4444;
  color: #fca5a5;
}

.ai-cf7-wrapper .wpcf7-validation-errors {
  background: rgba(251,191,36,0.1);
  border-color: #f59e0b;
  color: #fcd34d;
}

/* Privacy note */
.ai-contact__privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.35);
  margin-top: 18px;
  text-align: center;
}

.ai-contact__privacy svg {
  stroke: rgba(200,169,110,0.5);
  flex-shrink: 0;
}

/* ── ANIMATIONS & TRANSITIONS ────────────────────────────────── */

.ai-fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ai-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.ai-fade-in-delay-1 { transition-delay: 0.1s; }
.ai-fade-in-delay-2 { transition-delay: 0.2s; }
.ai-fade-in-delay-3 { transition-delay: 0.3s; }
.ai-fade-in-delay-4 { transition-delay: 0.4s; }

/* ── RESPONSIVE ───────────────────────────────────────────────── */

/* ── Tablet (≤ 1024px) ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ai-about__grid           { grid-template-columns: 1fr; gap: 50px; }
  .ai-about__image-wrap     { max-width: 540px; }
  .ai-features__grid        { grid-template-columns: 1fr 1fr; }
  .ai-benefits__grid        { grid-template-columns: 1fr; gap: 50px; }
  .ai-project-featured      { grid-template-columns: 1fr; }
  .ai-project-featured__image { height: 340px; }
  .ai-footer__grid          { grid-template-columns: 1fr 1fr; }
  .ai-cf7-wrapper           { padding: 32px 28px; }
  .ai-cta__inner--wide      { max-width: 680px; }
}

/* ── Mobile (≤ 768px) ──────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --section-pad: 60px;
  }

  /* Hero */
  .ai-hero__content         { padding: 100px 20px 70px; }
  .ai-hero__stats           { flex-direction: column; max-width: 100%; }
  .ai-hero__stat            { border-right: none; border-bottom: 1px solid rgba(200,169,110,0.15); }
  .ai-hero__stat:last-child { border-bottom: none; }
  .ai-hero__actions         { flex-direction: column; align-items: flex-start; }
  .ai-hero__actions .ai-btn { width: 100%; justify-content: center; }

  /* Marquee */
  .ai-marquee__item         { padding: 0 20px; font-size: 0.72rem; }

  /* Sections */
  .ai-features__grid        { grid-template-columns: 1fr; }
  .ai-projects-grid         { grid-template-columns: 1fr; }
  .ai-testimonials__grid    { grid-template-columns: 1fr; }
  .ai-benefits__cards       { grid-template-columns: 1fr 1fr; }
  .ai-footer__grid          { grid-template-columns: 1fr; }
  .ai-form__row             { grid-template-columns: 1fr; }
  .ai-about__values         { grid-template-columns: 1fr; }
  .ai-footer__bottom        { flex-direction: column; text-align: center; }
  .ai-project-featured__image { height: 260px; }
  .ai-project-featured__content { padding: 32px 28px; }
  .ai-project-featured__meta { flex-wrap: wrap; gap: 16px; }

  /* CF7 form on mobile */
  .ai-cf7-wrapper           { padding: 24px 20px; }
  .ai-cta--form             { text-align: center; }
}

/* ── Small Mobile (≤ 480px) ───────────────────────────────────── */
@media (max-width: 480px) {
  .ai-hero__title           { font-size: 2rem; }
  .ai-hero__badge           { font-size: 0.68rem; }
  .ai-benefits__cards       { grid-template-columns: 1fr; }
  .ai-project-featured__actions { flex-direction: column; }
  .ai-project-featured__actions .ai-btn { width: 100%; justify-content: center; }
  .ai-marquee::before,
  .ai-marquee::after        { width: 40px; }
  .ai-cf7-wrapper           { padding: 20px 16px; }
}