/* ============================================================
   ALIFY — home.css · homepage sections (electronic editorial)
   ============================================================ */

/* ---------------- HERO ---------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: 0;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 78% 12%, rgba(56, 65, 102, .55), transparent 65%),
    radial-gradient(45% 40% at 8% 90%, rgba(11, 115, 95, .18), transparent 60%),
    var(--ink);
}
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(13,13,13,.65)); opacity: 0; pointer-events: none; }

.hero__inner { width: 100%; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.hero__grid { display: grid; gap: 2.5rem; align-items: end; }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: repeat(12, 1fr); gap: 2rem; }
  .hero__main { grid-column: 1 / 9; }
  .hero__media { grid-column: 9 / 13; }
}

.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.hero__meta-line { font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); display: inline-flex; align-items: center; gap: .8rem; }
.hero__meta-line::after { content: ""; width: 3rem; height: 1px; background: var(--line-2); }

.hero__title { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

.hero__lead-row { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero__media { position: relative; max-width: 400px; }
.hero__media .media-frame { border-radius: 6px; }
.hero__media-tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
}
@media (max-width: 1023px) {
  .hero__media { max-width: 460px; }
}

/* ---------------- SERVICE MARQUEE ---------------- */
.marquee {
  border-block: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(12,220,42,.05), transparent 30%, transparent 70%, rgba(11,115,95,.12)),
    var(--ink-2);
  overflow: hidden;
  padding-block: 1.15rem;
}
.marquee__track {
  display: flex; gap: 3.5rem;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item {
  display: inline-flex; align-items: center; gap: 3.5rem;
  font-family: var(--ff-mono); font-size: .85rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(236, 236, 228, .66);
  white-space: nowrap;
}
.marquee__item i { font-style: normal; color: var(--green); font-size: .7em; }
.marquee__item:nth-child(even) { color: var(--sand); }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------------- SERVICES INDEX (editorial list) ---------------- */
.svc-index { border-top: 1px solid var(--line); }
.svc-index__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem 3rem;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background .35s, padding .35s;
}
.svc-index__row .idx { grid-row: 1; }
.svc-index__name { font-family: var(--ff-display); font-weight: 500; font-size: clamp(1.5rem, 3.2vw, 2.35rem); color: var(--off); transition: color .3s; letter-spacing: -.01em; }
.svc-index__meta { display: none; }
.svc-index__arrow { color: var(--muted); font-size: 1.5rem; transition: color .3s, transform .35s; }
.svc-index__row:hover { background: linear-gradient(90deg, rgba(12,220,42,.05), transparent 45%); padding-left: 1rem; }
.svc-index__row:hover .svc-index__name { color: var(--green); }
.svc-index__row:hover .svc-index__arrow { color: var(--green); transform: translateX(6px) rotate(-45deg); }

@media (min-width: 768px) {
  .svc-index__row { grid-template-columns: 64px 1fr auto auto; }
  .svc-index__meta { display: block; max-width: 30ch; color: var(--muted); font-size: .9rem; line-height: 1.55; }
}

/* hub variant: rows with 4:3 preview image that follows the cursor */
.svc-hub { position: relative; }
.svc-hub__preview {
  position: fixed;
  z-index: 25;
  width: min(320px, 27vw);
  aspect-ratio: 3 / 2;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: scale(.85) rotate(-3deg);
  transition: opacity .3s ease, transform .3s ease;
  background: var(--panel);
}
.svc-hub__preview img { width: 100%; height: 100%; object-fit: cover; }
.svc-hub__preview.is-visible { opacity: 1; transform: scale(1) rotate(0); }
@media (hover: none), (max-width: 1023px) { .svc-hub__preview { display: none; } }

/* ---------------- SELECTED WORK (slider) ---------------- */
.work-head-row { display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

.sl-nav { display: flex; gap: .7rem; }

.work-slide { text-decoration: none; display: block; }
.work-slide__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; }
.work-slide__title { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 500; color: var(--off); transition: color .3s; }
.work-slide:hover .work-slide__title { color: var(--green); }
.work-slide__cat { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-2); }
.work-slide__result { font-family: var(--ff-mono); font-size: .78rem; color: var(--teal-2); margin-top: .35rem; display: block; }

/* swiper shell — peek comes from fractional slidesPerView on small screens */
.swiper { overflow: hidden; }

/* ---------------- PULL QUOTE (sand feature) ---------------- */
.pquote { position: relative; overflow: hidden; }
.pquote__mark {
  font-family: var(--ff-accent);
  font-size: clamp(7rem, 18vw, 13rem);
  line-height: .6;
  color: var(--teal);
  opacity: .3;
  position: absolute;
  top: clamp(2rem, 6vw, 4rem); left: var(--gutter);
  pointer-events: none;
}
.pquote__inner { display: grid; gap: 2.5rem; position: relative; }
@media (min-width: 1024px) {
  .pquote__inner { grid-template-columns: repeat(12, 1fr); }
  .pquote__body { grid-column: 2 / 11; }
}
.pquote__text { margin-bottom: 2rem; }
.pquote__attr { display: flex; align-items: center; gap: 1.25rem; font-family: var(--ff-mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(23,23,14,.7); }
.pquote__attr::before { content: ""; width: 3rem; height: 1px; background: rgba(23,23,14,.45); }
.pquote__foot { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(23,23,14,.2); font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(23,23,14,.6); }

/* ---------------- TESTIMONIALS ---------------- */
/* equal-height slides in the testimonial slider */
.js-t-slider .swiper-slide { height: auto; display: flex; }
.js-t-slider .t-card { width: 100%; }

.t-card {
  height: 100%;
  display: flex; flex-direction: column; gap: 1.25rem;
  background: linear-gradient(165deg, #1A1D2E, #14161F 70%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.5rem, 2.5vw, 2rem);
}
.t-card__stars { color: var(--green); letter-spacing: .2em; font-size: .95rem; }
.t-card__quote { font-size: 1.02rem; line-height: 1.65; color: rgba(236,236,228,.88); flex: 1; }
.t-card__quote em { font-family: var(--ff-accent); color: var(--sand); }
.t-card__foot { display: flex; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.t-card__avatar {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--ff-display); font-weight: 600; font-size: .95rem;
  color: var(--ink);
  background: var(--sand);
}
.t-card__avatar--teal { background: var(--teal-2); }
.t-card__avatar--navy { background: #7A86B8; color: var(--ink); }
.t-card__avatar--sage { background: var(--sage-2); }
.t-card__avatar--green { background: var(--green); }
.t-card__name { font-weight: 600; color: var(--off); font-size: .95rem; }
.t-card__loc { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; }
.t-card__service { margin-left: auto; }

/* ---------------- CTA BAND ---------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band__inner {
  position: relative;
  background:
    radial-gradient(80% 130% at 85% 20%, rgba(12, 220, 42, .13), transparent 55%),
    radial-gradient(60% 100% at 0% 100%, rgba(11, 115, 95, .2), transparent 60%),
    var(--navy);
  border: 1px solid rgba(236,236,228,.1);
  border-radius: 8px;
  padding: clamp(2.5rem, 6vw, 5rem);
}
.cta-band__grid { display: grid; gap: 2.5rem; align-items: end; }
@media (min-width: 1024px) {
  .cta-band__grid { grid-template-columns: repeat(12, 1fr); }
  .cta-band__main { grid-column: 1 / 9; }
  .cta-band__side { grid-column: 9 / 13; justify-self: end; }
}
.cta-band .display { font-size: clamp(2.5rem, 6vw, 4.75rem); }
.cta-band__side { display: grid; gap: 1.25rem; justify-items: start; }
.cta-band__note { font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(236,236,228,.55); }
.cta-band__wm {
  position: absolute; right: -2%; bottom: -18%;
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(10rem, 24vw, 20rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(236,236,228,.07);
  pointer-events: none; user-select: none; line-height: .8;
}

/* stats section on home gets a hairline label row */
.stats-intro { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 2.5rem; flex-wrap: wrap; }