/* ==========================================================================
   Landing Page — split-world entry (VGIS brand identity)
   ========================================================================== */

body[data-page="landing"] {
  background: #0a0a0a;
  color: #f4f1e8;
  font-family: 'Inter', system-ui, sans-serif;
}

.landing-wrap { min-height: 100vh; display: flex; flex-direction: column; }

.landing-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.5rem;
  position: relative;
  z-index: 5;
}
.landing-top .brand { color: #f4f1e8; }
.landing-top .brand img { filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)); }
.landing-top .brand-name { color: #f4f1e8; }
.landing-top .brand-tag { color: rgba(244,241,232,.6); }
.landing-top-links { display: flex; gap: 2rem; font-size: .85rem; color: #a8a89e; letter-spacing: .15em; text-transform: uppercase; }
.landing-top-links a:hover { color: var(--vgis-orange); }
@media (max-width: 720px) {
  .landing-top-links { display: none; }
}

/* Hero — split-screen */
.hero-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 80px);
  position: relative;
}

.hero-side {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 3rem;
  cursor: pointer;
  isolation: isolate;
  border-right: 2px solid #0a0a0a;
}
.hero-side:last-child { border-right: 0; }
.hero-side::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: contrast(1.05) saturate(1.1);
  transition: transform 1.4s var(--ease), filter .4s var(--ease);
}
.hero-side::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: background var(--dur) var(--ease);
}
.hero-side--3d::before { background-image: url('../assets/images/3d/1.jpg'); }
.hero-side--2d::before { background-image: url('../assets/images/2d/2.jpg'); }

.hero-side--3d::after {
  background: linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.7) 70%, rgba(10,10,10,.96) 100%);
}
.hero-side--2d::after {
  background: linear-gradient(180deg, rgba(244,241,232,.15) 0%, rgba(244,241,232,.78) 70%, rgba(244,241,232,.97) 100%);
}
.hero-side:hover::before { transform: scale(1.04); }

.hero-side-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  transition: transform .6s var(--ease);
}
.hero-side:hover .hero-side-inner { transform: translateY(-6px); }

.hero-side-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .9rem;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: .9rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  border: 1px solid currentColor;
}
.hero-side--3d .hero-side-eyebrow { color: var(--vgis-orange); }
.hero-side--2d .hero-side-eyebrow { color: #0a0a0a; }

.hero-side-eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  background: currentColor;
}

.hero-side-title {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(3rem, 6.5vw, 5.5rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.hero-side--3d .hero-side-title { color: #f4f1e8; }
.hero-side--2d .hero-side-title { color: #0a0a0a; }

.hero-side-desc {
  margin-top: 1.2rem;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 440px;
}
.hero-side--3d .hero-side-desc { color: rgba(244,241,232,.78); }
.hero-side--2d .hero-side-desc { color: rgba(10,10,10,.72); }

.hero-side-cta {
  margin-top: 2.4rem;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 1.1rem 1.8rem;
  border: 2px solid currentColor;
  transition: all var(--dur) var(--ease);
}
.hero-side--3d .hero-side-cta {
  color: #0a0a0a;
  background: var(--vgis-orange);
  border-color: var(--vgis-orange);
}
.hero-side--3d:hover .hero-side-cta {
  box-shadow: 6px 6px 0 #f4f1e8;
  transform: translate(-2px, -2px);
}
.hero-side--2d .hero-side-cta {
  color: #f4f1e8;
  background: #0a0a0a;
  border-color: #0a0a0a;
}
.hero-side--2d:hover .hero-side-cta {
  background: var(--vgis-orange);
  color: #0a0a0a;
  border-color: var(--vgis-orange);
  box-shadow: 6px 6px 0 #0a0a0a;
  transform: translate(-2px, -2px);
}
.hero-side-cta .arrow { transition: transform var(--dur) var(--ease); }
.hero-side:hover .hero-side-cta .arrow { transform: translateX(6px); }

.hero-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: #0a0a0a;
  z-index: 2;
  pointer-events: none;
}

.hero-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: #0a0a0a;
  border: 2px solid var(--vgis-orange);
  box-shadow: 0 0 0 4px rgba(10,10,10,.95), 3px 3px 0 var(--vgis-orange);
}
.hero-badge__img {
  width: 40px;
  height: auto;
  display: block;
}
@media (max-width: 880px) {
  /* Keep the split layout — scale content instead of stacking */
  .hero-split { min-height: 78vh; }
  .hero-side { padding: 1.5rem 1.4rem; }
  .hero-side-title { font-size: clamp(1.6rem, 6vw, 3rem); }
  .hero-side-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .9rem;
    margin-top: .8rem;
  }
  .hero-side-eyebrow { font-size: .78rem; padding: .3rem .7rem; margin-bottom: 1rem; }
  .hero-side-cta { padding: .85rem 1.2rem; font-size: .95rem; margin-top: 1.4rem; }
  .hero-badge { transform: translate(-50%, -50%) scale(.55); }
  .hero-divider { width: 2px; }
}

@media (max-width: 600px) {
  .hero-split { min-height: 70vh; }
  .hero-side { padding: 1.2rem 1rem; }
  .hero-side-title { font-size: clamp(1.4rem, 6.5vw, 2.2rem); }
  .hero-side-desc { display: none; }   /* tiny screens: skip the paragraph */
  .hero-side-cta { padding: .8rem 1.05rem; font-size: .85rem; letter-spacing: .1em; }
  .hero-side-eyebrow::before { width: 6px; height: 6px; }
  .hero-badge { transform: translate(-50%, -50%) scale(.7); }
  .hero-badge__img { width: 36px; }
}

/* Capabilities strip */
.cap-section {
  background: #0a0a0a;
  color: #f4f1e8;
  padding: 5rem 0 6rem;
}
.cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 2px solid rgba(244,241,232,.15);
}
.cap {
  padding: 2.5rem 1.8rem;
  border-right: 2px solid rgba(244,241,232,.15);
}
.cap:last-child { border-right: 0; }
.cap-num {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 3.2rem;
  letter-spacing: .03em;
  color: var(--vgis-orange);
  text-transform: uppercase;
}
.cap-label {
  margin-top: .6rem;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 1.2rem;
  letter-spacing: .1em;
  color: #f4f1e8;
  text-transform: uppercase;
}
.cap-meta { color: rgba(244,241,232,.6); font-size: .92rem; margin-top: .8rem; line-height: 1.6; }

@media (max-width: 880px) {
  .cap-grid { grid-template-columns: 1fr; }
  .cap { border-right: 0; border-bottom: 2px solid rgba(244,241,232,.15); }
  .cap:last-child { border-bottom: 0; }
}

/* Marquee */
.marquee {
  background: #f4f1e8;
  color: #0a0a0a;
  padding: 1rem 0;
  overflow: hidden;
  border-top: 2px solid #0a0a0a;
  border-bottom: 2px solid #0a0a0a;
}
.marquee-track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
}
.marquee-track span {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 1.5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
.marquee-track span::after {
  content: '+';
  color: var(--vgis-orange);
  font-weight: 700;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Testimonials (carousel) ---------- */
.testimonial-section {
  background: #0a0a0a;
  color: #f4f1e8;
  padding: 6rem 0 4rem;
  border-top: 2px solid rgba(244,241,232,.08);
}
.testimonial-section .container > .section-head h2 {
  color: #f4f1e8;
  letter-spacing: .03em;
}
.testimonial-section .container > .section-head p {
  color: rgba(244,241,232,.65);
}

.t-carousel {
  position: relative;
  margin: 3rem auto 0;
  max-width: 760px;
  padding: 0 3.5rem;          /* room for arrows on left/right */
}

.t-carousel__viewport {
  position: relative;
  min-height: 380px;
}

.t-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.t-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear 0s;
}
.t-slide__inner {
  padding: 2.4rem 2.2rem;
  background: #141414;
  border: 2px solid rgba(244,241,232,.12);
}
.t-slide.is-active .t-slide__inner {
  border-color: rgba(244,241,232,.18);
}

/* Reused card styling but scoped under carousel */
.testimonial-card__mark {
  display: block;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--vgis-orange);
  margin-bottom: .4rem;
  letter-spacing: .05em;
}

.testimonial-card__quote {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  line-height: 1.65;
  color: #f4f1e8;
  margin: 0 0 1.5rem;
  font-weight: 400;
}

.testimonial-card__meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding-top: 1.2rem;
  border-top: 2px solid rgba(244,241,232,.12);
}
.testimonial-card__project {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 1.1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f4f1e8;
}
.testimonial-card__role {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  color: rgba(244,241,232,.55);
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-top: .3rem;
}

.testimonial-card__metric {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  margin: 1.2rem 0 1.4rem;
  padding: .55rem .85rem;
  border: 2px solid var(--vgis-orange);
  background: transparent;
  align-self: flex-start;
}
.testimonial-card__metric strong {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 1.5rem;
  letter-spacing: .03em;
  color: var(--vgis-orange);
}
.testimonial-card__metric span {
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  color: rgba(244,241,232,.7);
  text-transform: uppercase;
  letter-spacing: .15em;
}

/* Arrow buttons */
.t-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #0a0a0a;
  color: #f4f1e8;
  border: 2px solid #f4f1e8;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.t-carousel__arrow:hover {
  background: var(--vgis-orange);
  color: #0a0a0a;
  border-color: var(--vgis-orange);
}
.t-carousel__prev { left: 0; }
.t-carousel__next { right: 0; }

/* Dots */
.t-carousel__dots {
  display: flex;
  justify-content: center;
  gap: .55rem;
  margin-top: 2rem;
}
.t-carousel__dots button {
  width: 28px;
  height: 6px;
  background: rgba(244,241,232,.25);
  border: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.t-carousel__dots button:hover { background: rgba(244,241,232,.55); }
.t-carousel__dots button.is-active { background: var(--vgis-orange); }

/* Responsive carousel */
@media (max-width: 760px) {
  .t-carousel { padding: 0 1rem; }
  .t-carousel__arrow { width: 40px; height: 40px; }
  .t-carousel__viewport { min-height: 440px; }
  .t-slide__inner { padding: 1.8rem 1.4rem; }
  .testimonial-card__quote { font-size: 1.05rem; }
  .testimonial-card__mark { font-size: 3rem; }
}
@media (max-width: 480px) {
  .t-carousel__viewport { min-height: 480px; }
  .testimonial-card__quote { font-size: 1rem; }
}

/* Landing footer */
.landing-foot {
  background: #0a0a0a;
  color: rgba(244,241,232,.5);
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: .85rem;
  border-top: 2px solid rgba(244,241,232,.1);
  text-transform: uppercase;
  letter-spacing: .15em;
}
.landing-foot a { color: rgba(244,241,232,.7); }
.landing-foot a:hover { color: var(--vgis-orange); }

/* Quote band — official VGIS tagline */
.quote-band {
  background: #f4f1e8;
  color: #0a0a0a;
  padding: 5rem 1.5rem;
  text-align: center;
  border-top: 2px solid #0a0a0a;
}
.quote-band blockquote {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  letter-spacing: .03em;
  line-height: 1.05;
  text-transform: uppercase;
  max-width: 920px;
  margin: 0 auto;
}
.quote-band blockquote em {
  color: #0a0a0a;
  background: var(--vgis-orange);
  padding: 0 .3rem;
}
.quote-band cite {
  display: block;
  margin-top: 1.5rem;
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #6e6e6c;
}