/* Homepage-only sections, built in the template's established visual
   language (section-title eyebrow pattern, gold gradients, 20px card
   radius, dark-section inversion) — ported/adapted from custom.css
   "04. Hero", "05. Scrolling Ticker", "06. About Us", "07. Our Services",
   "08. Why Choose Us", "10. How It Works", "11. Our Projects",
   "13. Our Pricing", "15. Our FAQs". */

/* ---- Hero ---- */

.hero {
  position: relative;
  padding: 140px 0 140px;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Darkens the video enough to keep white hero text legible regardless of
   what's playing underneath. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0C0C0Dcc 0%, #0C0C0D99 45%, #0C0C0Dd9 100%);
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--accent-strong) 20%, transparent), transparent 45%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 45%);
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.hero-content .section-title h1 {
  margin-top: 10px;
}

.hero-content p {
  max-width: 60ch;
  font-size: 18px;
}

.hero-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
  margin-top: 40px;
}

/* ---- Scrolling ticker ---- */

.our-scrolling-ticker {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
  padding: 22px 0;
}

.scrolling-ticker-box {
  --gap: 30px;
  display: flex;
  align-items: center;
  overflow: hidden;
  gap: var(--gap);
}

.scrolling-content {
  flex-shrink: 0;
  display: flex;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll-ticker 40s linear infinite;
}

.scrolling-content span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

.scrolling-content span::before {
  content: '\2726';
  font-size: 16px;
}

@keyframes scroll-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--gap))); }
}

/* ---- Intro / about ---- */

.about-us {
  padding: 100px 0;
}

.about-us-images {
  position: relative;
  height: 100%;
}

.about-us-images figure {
  height: 100%;
  min-height: 420px;
  border-radius: 20px;
  overflow: hidden;
}

.about-us-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-us-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 30px;
  margin-bottom: 40px;
}

.about-us-list ul li {
  position: relative;
  width: calc(50% - 15px);
  padding-left: 26px;
  line-height: 1.5em;
}

@media (max-width: 860px) {
  .about-us-list ul li {
    width: 100%;
  }
}

.about-us-list ul li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-us-item-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.about-us-item {
  width: calc(50% - 15px);
  background: var(--surface-alt);
  border: 1px solid var(--divider);
  border-radius: 20px;
  padding: 30px;
}

@media (max-width: 860px) {
  .about-us-item {
    width: 100%;
  }
}

.about-us-item h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.about-us-item p {
  color: var(--text-body);
  margin: 0;
}

.about-us-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 30px;
  border-top: 1px solid var(--divider);
  padding-top: 40px;
  margin-top: 40px;
}

/* ---- Split brand cards (this page's take on "Our Services") ---- */

.our-services {
  padding: 100px 0;
  background: var(--surface-alt);
}

.brand-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 20px;
}

@media (max-width: 860px) {
  .brand-cards { grid-template-columns: minmax(0, 1fr); }
}

.brand-card {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--divider);
  background: var(--surface);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.brand-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px #00000026;
}

.brand-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.brand-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.brand-card:hover .brand-card__media img {
  transform: scale(1.06);
}

.brand-card__body {
  padding: 32px;
}

.brand-card__body h3 {
  font-size: 28px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.brand-card__body p {
  color: var(--text-body);
}

.brand-card__list {
  margin: 16px 0 24px;
}

.brand-card__list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 15px;
  color: var(--text-body);
}

.brand-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---- Why choose us ---- */

.why-choose-us {
  padding: 100px 0;
}

.why-choose-items-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 30px 0 40px;
}

.why-choose-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.why-choose-item .icon-box {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-accent);
  font-family: var(--font-heading);
  font-weight: 700;
}

.why-choose-item h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.why-choose-item p {
  color: var(--text-body);
  margin: 0;
}

.why-choose-images {
  position: relative;
}

.why-choose-images figure {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.why-choose-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-choose-counter-box {
  position: absolute;
  right: 24px;
  bottom: 24px;
  background: var(--surface);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 20px 40px #00000033;
}

.why-choose-counter-box h2 {
  font-size: 40px;
}

.why-choose-counter-box h2 span {
  color: var(--accent-strong);
}

.why-choose-counter-box h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-body);
  margin-top: 4px;
}

/* ---- How it works ---- */

.how-it-works {
  padding: 100px 0;
  background: var(--surface-alt);
}

.how-works-item-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 20px;
}

@media (max-width: 960px) {
  .how-works-item-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .how-works-item-list { grid-template-columns: minmax(0, 1fr); }
}

.how-works-item {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 20px;
  padding: 30px;
}

.how-works-item-no {
  font-family: var(--font-heading);
  font-size: 40px;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  margin-bottom: 12px;
}

.how-works-item h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.how-works-item p {
  color: var(--text-body);
  font-size: 14px;
  margin: 0;
}

/* ---- Gallery / projects (grid/item cards live in base.css — shared with
   the full /gallery.php page — this is just the homepage section wrapper) ---- */

.our-gallery {
  padding: 100px 0;
}

/* ---- Pricing (homepage teaser section wrapper only; the .pricing-item /
   .pricing-row card components themselves live in base.css since the full
   /pricing.php page uses them too) ---- */

.our-pricing {
  padding: 100px 0;
  background: var(--surface-alt);
}

/* ---- Section spacing (mobile) ----
   100px top+bottom means two adjacent sections sit 200px apart, which reads
   as a lot of dead space once there's no room for a multi-column layout to
   fill it. Tighten to 60px on mobile so the page keeps a reasonable rhythm. */
/* ---- Blog widget (homepage's only use of the shared .service-section
   wrapper) ---- */

.service-section {
  background: var(--surface-alt);
}

.service-section .section-row {
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .about-us,
  .our-services,
  .why-choose-us,
  .how-it-works,
  .our-gallery,
  .our-pricing {
    padding: 60px 0;
  }
}