/* ==========================================================================
   SECTIONS — hero, pills, service detail, feature grid, process,
              testimonials, logo marquee, cta
   ========================================================================== */

/* ====================== HERO (full-bleed background image) ====================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(480px, 52vw, 660px);
  padding-block: var(--sp-9);
  background-image: url("../../img/hero.png");
  background-size: cover;
  background-position: 32% center;
  background-repeat: no-repeat;
  overflow: hidden;
  border-top-left-radius: 42px;
  border-top-right-radius: 42px;
}
/* Readability overlay — darkest on the RIGHT (where the copy now sits),
   clears toward the LEFT so the photo stays crisp on the left. */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(28, 12, 4, 0.0) 16%,
      rgba(28, 12, 4, 0.10) 32%,
      rgba(28, 12, 4, 0.48) 52%,
      rgba(28, 12, 4, 0.80) 72%,
      rgba(28, 12, 4, 0.93) 100%);
}
/* Warm brand glow at the bottom edge to tie the photo into the palette */
.hero::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 45%; z-index: -1;
  background: linear-gradient(0deg, rgba(194,65,12,.35), transparent);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero__content {
  position: relative;
  max-width: 540px;
  margin-left: auto;                      /* push copy to the right side */
  margin-right: calc(var(--sp-5) * -1);   /* nudge a bit further right */
  text-align: left;
  color: #fff;
}
.hero__services {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--brand-300);
  margin-bottom: var(--sp-4);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
.hero__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  font-size: var(--fs-sm); font-weight: 600; color: #fff;
  margin-bottom: var(--sp-5);
}
.hero__kicker svg { width: 17px; height: 17px; color: var(--brand-400); }
.hero__title {
  font-size: var(--fs-hero);
  color: #fff;
  margin-bottom: var(--sp-4);
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero__title .text-grad {
  background: linear-gradient(120deg, #fdba74, #fb923c 55%, #f97316);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero__lead {
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-md);
  max-width: 48ch;
  text-shadow: 0 1px 12px rgba(0,0,0,.3);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__actions .btn--soft {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  color: #fff;
  backdrop-filter: blur(6px);
}
.hero__actions .btn--soft:hover { background: rgba(255,255,255,.2); }

.hero__meta {
  display: flex; align-items: center; gap: var(--sp-6);
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.18);
  flex-wrap: wrap;
}
.hero__meta-item { display: flex; flex-direction: column; }
.hero__meta-item b { font-family: var(--font-display); font-size: var(--fs-xl); color: #fff; }
.hero__meta-item span { font-size: var(--fs-xs); color: rgba(255,255,255,.7); }

/* ====================== SERVICES SLIDER + SPARKLES ====================== */
.spark { overflow: hidden; padding-bottom: 0; }
.spark__head { text-align: center; max-width: 640px; margin: 0 auto var(--sp-7); }
.spark__title { font-size: var(--fs-3xl); line-height: 1.18; }

/* Infinite slider (= InfiniteSlider) with edge fade (= ProgressiveBlur) */
.slider {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.slider__track {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: max-content;
  padding-block: var(--sp-2);
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.slider:hover .slider__track { animation-play-state: paused; }
.slide-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.slide-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.slide-chip .ic {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px; color: #fff;
  background: var(--grad-brand);
}
.slide-chip .ic svg { width: 17px; height: 17px; }

/* Sparkles glow stage (= Sparkles + radial glow + horizon arc) */
.spark-stage {
  position: relative;
  height: 320px;
  margin-top: -1.5rem;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(58% 62% at 50% 78%, #000 38%, transparent 100%);
  mask-image: radial-gradient(58% 62% at 50% 78%, #000 38%, transparent 100%);
}
.spark-stage__glow {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at 50% 100%, var(--brand-500), transparent 62%);
  opacity: 0.5;
}
.spark-stage__canvas {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%; z-index: 2;
  --spark-color: #c2410c;
  -webkit-mask-image: radial-gradient(52% 60% at 50% 82%, #000, transparent 86%);
  mask-image: radial-gradient(52% 60% at 50% 82%, #000, transparent 86%);
}
[data-theme="dark"] .spark-stage__canvas { --spark-color: #ffffff; }
.spark-stage__arc {
  position: absolute; left: -50%; top: 56%;
  width: 200%; aspect-ratio: 1 / 0.7;
  border-radius: 50%;
  background: var(--bg);
  border-top: 1px solid rgba(249, 115, 22, 0.55);
  box-shadow: 0 -1px 30px -4px rgba(249, 115, 22, 0.45);
  z-index: 3;
}

/* ====================== SERVICE DETAIL (split) ====================== */
.detail__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--sp-8);
  align-items: center;
}
.detail__list { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.detail__list li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--text-muted); font-size: var(--fs-sm); }
.detail__list .tick {
  flex: none; width: 22px; height: 22px; border-radius: 7px; margin-top: 1px;
  display: grid; place-items: center; color: #fff; background: var(--green-500);
}
.detail__list .tick svg { width: 13px; height: 13px; }

/* stacked landscape reference cards (project screenshots inside browser frames) */
.devices { position: relative; min-height: 400px; }
.shot {
  position: absolute;
  width: 82%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.shot__img {
  width: 100%;
  aspect-ratio: 16 / 10;        /* horizontal rectangle */
  object-fit: cover;
  display: block;
}
.shot--back  { top: 0; right: 0; transform: rotate(2.5deg); }
.shot--front { bottom: 0; left: 0; z-index: 2; transform: rotate(-2.5deg); }
.devices:hover .shot--back  { transform: rotate(4deg) translateY(-6px); box-shadow: var(--shadow-lg), var(--shadow-brand); }
.devices:hover .shot--front { transform: rotate(-1deg) translateY(-6px); box-shadow: var(--shadow-lg), var(--shadow-brand); }

/* ====================== FEATURE GRID (4 + center dark) ====================== */
.feature__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: var(--sp-5);
  align-items: stretch;
}
.feature__col { display: grid; gap: var(--sp-5); align-content: center; }
.feature-card .feature-card__title { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.feature-card p { color: var(--text-muted); font-size: var(--fs-sm); }

/* Center highlight (dark in both themes) */
.feature__center {
  position: relative;
  background: var(--ink);
  color: var(--ink-text);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.feature__center::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(249,115,22,.4), transparent 65%),
    radial-gradient(60% 60% at 50% 110%, rgba(194,65,12,.3), transparent 60%);
}
.feature__center > * { position: relative; }
.feature__center .stars { color:#fbbf24; display:flex; gap:3px; margin-bottom: var(--sp-4); }
.feature__center .stars svg { width:18px; height:18px; fill: currentColor; }
.feature__center .chip { margin-inline: auto; }
.feature__center h3 { color:#fff; font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.feature__center p { color: var(--ink-muted); font-size: var(--fs-sm); max-width: 30ch; margin: 0 auto var(--sp-5); }

/* ====================== PROCESS (dark block) ====================== */
.process {
  background: var(--ink);
  color: var(--ink-text);
  border-radius: var(--radius-2xl);
  padding: var(--sp-8) var(--sp-6);
  position: relative;
  overflow: hidden;
}
.process::before {
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(40% 60% at 15% 10%, rgba(249,115,22,.2), transparent 60%),
    radial-gradient(40% 60% at 85% 90%, rgba(194,65,12,.18), transparent 60%);
}
.process > * { position: relative; }
.process__head { text-align: center; max-width: 640px; margin: 0 auto var(--sp-7); }
.process__head h2 { color: #fff; font-size: var(--fs-3xl); }
.process__head p { color: var(--ink-muted); margin-top: var(--sp-3); }
.process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.step {
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-border);
  background: rgba(255,255,255,.03);
  transition: transform var(--dur-mid) var(--ease-out), background var(--dur-mid);
}
.step:hover { transform: translateY(-5px); background: rgba(255,255,255,.06); }
.step__num {
  position: absolute; top: var(--sp-4); right: var(--sp-5);
  font-family: var(--font-display); font-weight: 800; font-size: 2.4rem;
  color: rgba(255,255,255,.08);
}
.step .chip { width: 42px; height: 42px; border-radius: 11px; }
.step .chip svg { width: 21px; height: 21px; }
.step h3 { color: #fff; font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.step p { color: var(--ink-muted); font-size: var(--fs-sm); }

/* ====================== TESTIMONIALS (auto-scrolling columns) ====================== */
.tw__badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--brand-600);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
[data-theme="dark"] .tw__badge { color: var(--brand-400); }

.tw {
  display: flex;
  justify-content: center;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  max-height: 720px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.tw__col { width: 100%; max-width: 340px; }
.tw__col--md,
.tw__col--lg { display: none; }

.tw__track {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  animation: twScroll var(--tw-duration, 28s) linear infinite;
  will-change: transform;
}
.tw:hover .tw__track { animation-play-state: paused; }
@keyframes twScroll { to { transform: translateY(-50%); } }

.tw__card {
  padding: var(--sp-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.tw__card > p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }
.tw__person { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.tw__person img {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; flex: none;
  border: 1px solid var(--border);
}
.tw__person b { display: block; color: var(--text); font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; }
.tw__person span { color: var(--text-faint); font-size: var(--fs-xs); }

@media (min-width: 768px)  { .tw__col--md { display: block; } }
@media (min-width: 1024px) { .tw__col--lg { display: block; } }

/* ====================== LOGO MARQUEE ====================== */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--sp-4);
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.logo-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 700; font-size: var(--fs-sm);
  box-shadow: var(--shadow-xs);
  white-space: nowrap;
}
.logo-chip svg { width: 22px; height: 22px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ====================== CTA ====================== */
.cta {
  position: relative;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-2xl);
  padding: var(--sp-9) var(--sp-6);
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cta::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 80% at 50% -10%, rgba(249,115,22,.55), transparent 60%),
    radial-gradient(60% 80% at 50% 120%, rgba(194,65,12,.3), transparent 60%);
}
.cta > * { position: relative; }
.cta h2 { color:#fff; font-size: var(--fs-3xl); margin-bottom: var(--sp-4); }
.cta p { color: var(--ink-muted); max-width: 52ch; margin: 0 auto var(--sp-6); font-size: var(--fs-md); }
.cta__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }