@import '../tokens.css';

/* ─── Hero ───────────────────────────────────────────────── */
.hero {
  background-color: var(--color-bg-light);
  background-image: url('../../assets/images/BG-HERO.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 70vh;
  display: flex;
  align-items: center;
}

.hero__inner {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
}

.hero__spacer {
  flex: 45;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 36px;
  flex: 55;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__heading {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: var(--weight-extrabold);
  line-height: var(--lh-tight);
  color: var(--color-bg-dark);
}

.hero__heading .accent {
  color: var(--color-accent);
}

.hero__subtext {
  color: var(--color-bg-dark);
  font-size: var(--text-large);
  font-weight: var(--weight-medium);
  line-height: var(--lh-relaxed);
  padding-right: 80px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* ─── Logo Bar ───────────────────────────────────────────── */
.logo-bar {
  background: var(--gradient-primary);
  padding: 40px 0;
}

.logo-bar__inner {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.logo-bar__track {
  display: flex;
  width: max-content;
  animation: scroll-logos 30s linear infinite;
}

.logo-bar__set {
  display: flex;
  align-items: center;
  gap: 60px;
  padding-right: 60px;
  opacity: 0.6;
}

.logo-bar__set img {
  height: 50px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

@keyframes scroll-logos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── About ──────────────────────────────────────────────── */
.about {
  padding: 112px 0;
}

.about__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 80px;
}

.about__photo-wrap {
  flex-shrink: 0;
}

.about__photo {
  width: 500px;
  height: 500px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.about__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  flex: 1;
}

.about__heading {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about__heading .emoji {
  -webkit-text-fill-color: initial;
}

.about__text {
  color: var(--color-body);
}

/* ─── Services ───────────────────────────────────────────── */
.services {
  background-color: var(--color-bg-light);
  padding: var(--space-4xl) 0;
}

.services__inner {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.services__heading {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}

.services__grid {
  display: flex;
  gap: 32px;
  width: 100%;
  max-width: var(--container-width);
}

/* ─── Testimonial Banner ─────────────────────────────────── */
.testimonial-banner {
  background: linear-gradient(134deg, rgba(48, 115, 120, 1) 33%, rgba(47, 72, 88, 1) 100%);
  padding: 60px 0;
}

.testimonial-banner__inner {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.testimonial-banner__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.testimonial-banner__quote {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-h4);
  line-height: var(--lh-snug);
  color: var(--color-white);
}

.testimonial-banner__avatar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-align: left;
}

.testimonial-banner__photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-dark-grey);
}

.testimonial-banner__name {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-body);
  color: var(--color-white);
}

.testimonial-banner__company {
  font-size: var(--text-body);
  color: var(--color-white);
  opacity: 0.85;
}

/* ─── Projects ───────────────────────────────────────────── */
.projects {
  background-color: var(--color-white);
  padding: var(--space-4xl) 0;
}

.projects__inner {
  width: 100%;
  max-width: 1256px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.projects__heading {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}

.projects__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--container-width);
}

.projects__row {
  display: flex;
  gap: var(--space-lg);
}

/* ─── Reviews ────────────────────────────────────────────── */
.reviews {
  background-color: var(--color-bg-light);
  padding: var(--space-3xl) 0 var(--space-4xl);
  box-shadow: var(--shadow-sm);
}

.reviews__inner {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.reviews__heading {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}

.reviews__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--container-width);
}

.reviews__row {
  display: flex;
  gap: var(--space-lg);
}

/* ─── Contact ────────────────────────────────────────────── */
.contact {
  background-color: var(--color-white);
  padding: var(--space-4xl) 0;
}

.contact__inner {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 60px;
  align-items: flex-start;
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 457px;
  flex-shrink: 0;
}

.contact__heading {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact__text {
  color: var(--color-body);
}

.contact__text a {
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  color: var(--color-body);
}

.contact__social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.contact__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: opacity 0.2s ease;
}

.contact__social a:hover {
  opacity: 0.7;
}

.contact__social img {
  width: 24px;
  height: 24px;
}

.contact__calendly {
  flex: 1;
}

.hero__mobile-img {
  display: none;
}

/* ─── Tablet (≤1024px) ───────────────────────────────────── */
@media (max-width: 1024px) {

  /* Typography */
  h2 {
    font-size: 36px;
  }

  /* Hero */
  .hero {
    height: 60vh;
  }

  .hero__heading {
    font-size: 44px;
  }

  /* Logo Bar */
  .logo-bar__set img {
    height: 40px;
  }

  /* About */
  .about {
    padding: 80px 0;
  }

  .about__inner {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .about__photo {
    width: 100%;
    max-width: 400px;
    height: auto;
  }

  .about__content {
    max-width: 600px;
  }

  /* Services */
  .services {
    padding: 80px 0;
  }

  .services__inner {
    gap: 48px;
  }

  .services__grid {
    flex-direction: column;
    align-items: center;
  }

  .service-card {
    width: 100%;
    max-width: 600px;
  }

  .service-card h3 {
    font-size: 24px;
  }

  /* Projects */
  .projects {
    padding: 80px 0;
  }

  .projects__inner {
    gap: 48px;
  }

  .projects__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .projects__row {
    display: contents;
  }

  /* Reviews */
  .reviews {
    padding: 80px 0;
  }

  .reviews__inner {
    gap: 48px;
  }

  .reviews__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 700px;
  }

  .reviews__row {
    display: contents;
  }

  /* Contact */
  .contact {
    padding: 80px 0;
  }

  .contact__inner {
    flex-direction: column;
    align-items: center;
  }

  .contact__info {
    width: 100%;
    max-width: 600px;
    text-align: center;
    align-items: center;
  }

  .contact__calendly {
    width: 100%;
    max-width: 800px;
  }

  /* Testimonial Banner */
  .testimonial-banner {
    padding: 60px 0;
  }

  .testimonial-banner__quote {
    font-size: 22px;
  }

}

/* ─── Mobile (≤768px) ────────────────────────────────────── */
@media (max-width: 768px) {

  /* Typography */
  h2 {
    font-size: 32px;
  }

  /* Hero */
  .hero {
    height: auto;
    padding: 60px 0;
    background-image: none;
    background-color: var(--color-bg-light);
    flex-direction: column;
    align-items: stretch;
  }

  .hero__inner {
    flex-direction: column;
  }

  .hero__mobile-img {
    order: -1;
  }

  /* Logo Bar */
  .logo-bar {
    padding: 32px 0;
  }

  .logo-bar__set img {
    height: 40px;
  }

  /* Testimonial Banner */
  .testimonial-banner {
    padding: 60px 0;
  }

  .testimonial-banner__quote {
    font-size: 20px;
  }

  .stars img {
    width: 90px;
  }

  /* About */
  .about {
    padding: 48px 0;
  }

  .about__inner {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .about__photo {
    width: 90%;
    height: auto;
    max-width: none;
    margin: 0 auto;
  }

  /* Services */
  .services {
    padding: 48px 0;
  }

  .services__inner {
    gap: 40px;
  }

  .services__grid {
    gap: 24px;
  }

  .service-card h3 {
    font-size: 22px;
  }

  /* Projects */
  .projects {
    padding: 48px 0;
  }

  .projects__inner {
    gap: 40px;
  }

  .projects__grid {
    grid-template-columns: 1fr;
  }

  .project-card__image {
    height: auto;
  }

  /* Reviews */
  .reviews {
    padding: 48px 0;
  }

  .reviews__inner {
    gap: 40px;
  }

  .testimonial-card {
    flex-direction: column;
    gap: 16px;
  }

  .testimonial-card__photo {
    display: none;
  }

  .testimonial-card__photo--mobile {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }


  .testimonial-card__quote {
    font-size: 18px;
  }

  .testimonial-card__company {
    font-size: 16px;
  }

  .reviews__inner > .btn {
    margin-top: 8px;
    width: 100%;
  }

  /* Contact */
  .contact {
    padding: 48px 0;
  }

  .contact__info {
    max-width: 100%;
  }

  .contact__calendly {
    max-width: 100%;
    margin: 0 auto;
  }

  /* Footer */
  .footer {
    padding: 48px 0;
  }

  .footer__inner {
    padding: 32px;
    gap: 40px;
  }

  .footer__credits {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .services__inner > .btn {
    margin-top: 8px;
    width: 100%;
  }

  .hero__spacer {
    display: none;
  }

  .hero__heading {
    font-size: 34px;
  }

  .hero__subtext {
    padding-right: 0;
  }

  .hero__content {
    text-align: center;
    align-items: center;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero__actions .btn-primary {
    width: 100%;
    justify-content: center;
  }

  .hero__mobile-img {
    display: block;
    width: 100%;
    margin-bottom: 40px;
  }

}