/*
 * =============================================================
 * layout.css — ExpoAxis v2
 * Section-level grid scaffolding for all pages.
 * No visual decoration — only positioning & spatial logic.
 * =============================================================
 */


/* ============================================================
   HERO — full-viewport dark section
   ============================================================ */
.hero {
  position      : relative;
  min-height    : 100vh;
  display       : flex;
  flex-direction: column;
  background    : var(--navy);
  overflow      : hidden;
  padding       : 0; /* override global section { padding: var(--section-y) 0 } */
}

.hero-bg {
  position: absolute;
  inset   : 0;
  z-index : 0;
}
.hero-bg img, .hero-bg video {
  width: 100%; height: 100%; object-fit: cover;
}

.hero-overlay {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(
    135deg,
    rgba(15,23,42,0.93) 0%,
    rgba(15,23,42,0.80) 50%,
    rgba(15,23,42,0.87) 100%
  );
}

.hero-grid-pattern {
  position       : absolute;
  inset          : 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events : none;
}

.hero-glow-1 {
  position      : absolute;
  top           : -150px;
  right         : -100px;
  width         : 600px;
  height        : 600px;
  background    : radial-gradient(circle, rgba(249,115,22,0.18) 0%, transparent 65%);
  border-radius : 50%;
  pointer-events: none;
  animation     : floatSlow 9s ease-in-out infinite;
}

.hero-glow-2 {
  position      : absolute;
  bottom        : -100px;
  left          : -80px;
  width         : 500px;
  height        : 500px;
  background    : radial-gradient(circle, rgba(249,115,22,0.07) 0%, transparent 65%);
  border-radius : 50%;
  pointer-events: none;
  animation     : floatSlow 12s ease-in-out infinite reverse;
}

.hero-body {
  flex       : 1;
  position   : relative;
  z-index    : 2;
  display    : flex;
  align-items: center;
  padding    : 140px 0 80px;
}

.hero-content { max-width: 740px; }

.hero-stats-bar {
  position       : relative;
  z-index        : 2;
  border-top     : 1px solid rgba(255,255,255,0.07);
  background     : rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-stats-grid {
  display               : grid;
  grid-template-columns : repeat(4, 1fr);
}


/* ============================================================
   TRUST MARQUEE
   Technique: single .marquee-inner holds content × 2.
   Animating to translateX(-50%) = exactly one content width.
   When the loop resets to 0 the content looks identical → zero glitch.
   ============================================================ */
.trust-strip {
  background   : var(--bg-surface);
  border-top   : 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  overflow     : hidden;
}

.marquee-track  { overflow: hidden; }

.marquee-inner {
  display       : flex;
  width         : max-content;       /* shrink-wraps all items */
  gap           : 52px;
  align-items   : center;
  padding       : 18px 0;
  animation     : marqueeScroll 28s linear infinite;
  will-change   : transform;
}

/* Pause on hover for accessibility */
.trust-strip:hover .marquee-inner { animation-play-state: paused; }


/* ============================================================
   SERVICES GRID
   ============================================================ */
.services-section { background: var(--bg-surface); }

.services-grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 24px;
}


/* ============================================================
   PORTFOLIO PREVIEW — homepage
   ============================================================ */
.portfolio-section { background: var(--bg-primary); }

.portfolio-grid-home {
  display               : grid;
  grid-template-columns : repeat(4, 1fr);
  grid-auto-rows        : 220px;
  gap                   : 16px;
}

.project-tall  { grid-row   : span 2; }
.project-wide  { grid-column: span 2; }


/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.why-section { background: var(--navy); }

.why-grid {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 72px;
  align-items           : center;
}

.why-cards {
  display               : grid;
  grid-template-columns : repeat(2, 1fr);
  gap                   : 20px;
}


/* ============================================================
   PROCESS
   ============================================================ */
.process-section { background: var(--bg-surface); }

.process-steps {
  display               : grid;
  grid-template-columns : repeat(5, 1fr);
  gap                   : 0;
  position              : relative;
}

.process-steps::before {
  content   : '';
  position  : absolute;
  top       : 28px;
  left      : calc(10% + 20px);
  right     : calc(10% + 20px);
  height    : 2px;
  background: linear-gradient(90deg, var(--orange) 0%, rgba(249,115,22,0.15) 100%);
  z-index   : 0;
}


/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section { background: var(--bg-primary); overflow-x: hidden; }

.testimonials-track {
  display   : flex;
  gap       : 24px;
  padding   : 8px 0 32px;
  /* auto-scroll via animation */
  animation : testimonialsScroll 30s linear infinite;
  width     : max-content;
}
.testimonials-track:hover { animation-play-state: paused; }

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


/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-section { background: var(--navy); position: relative; overflow: hidden; }


/* ============================================================
   STATS STRIP
   ============================================================ */
.stats-section {
  background   : var(--bg-surface);
  border-top   : 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.stats-grid {
  display               : grid;
  grid-template-columns : repeat(4, 1fr);
}


/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background : var(--navy);
  padding-top: 80px;
}

.footer-grid {
  display               : grid;
  grid-template-columns : 1.8fr 1fr 1fr 1.5fr;
  gap                   : 48px;
  padding-bottom        : 56px;
  border-bottom         : 1px solid var(--border-dark);
}

.footer-bottom {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  padding        : 24px 0;
  gap            : 16px;
  flex-wrap      : wrap;
}


/* ============================================================
   INNER PAGE HERO — not fullscreen
   ============================================================ */
.page-hero {
  background: var(--navy);
  padding   : 144px 0 80px;
  position  : relative;
  overflow  : hidden;
}
.page-hero-pattern {
  position       : absolute;
  inset          : 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events : none;
}
.page-hero-glow {
  position      : absolute;
  top           : -120px;
  right         : -80px;
  width         : 500px;
  height        : 500px;
  background    : radial-gradient(circle, rgba(249,115,22,0.14) 0%, transparent 65%);
  border-radius : 50%;
  pointer-events: none;
}
.page-hero-content { position: relative; z-index: 2; }


/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-two-col {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 80px;
  align-items           : center;
}

.about-stats-row { display: flex; gap: 24px; margin: 32px 0; }

.team-grid {
  display               : grid;
  grid-template-columns : repeat(4, 1fr);
  gap                   : 24px;
}


/* ============================================================
   SERVICES PAGE
   ============================================================ */
.service-feature {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 80px;
  align-items           : center;
}

.service-feature:nth-child(even) .service-feature-visual { order: -1; }

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


/* ============================================================
   PORTFOLIO PAGE
   ============================================================ */
.portfolio-full-grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 20px;
}


/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-two-col {
  display               : grid;
  grid-template-columns : 1fr 1.3fr;
  gap                   : 64px;
  align-items           : start;
}


/* ============================================================
   INDUSTRIES PAGE
   ============================================================ */
.industries-grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 24px;
}


/* ============================================================
   BLOG PAGE
   ============================================================ */
.blog-grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 28px;
}

.blog-grid .blog-featured { grid-column: span 2; }