.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 94vh;
  padding: 130px var(--spacing-xl) 90px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 113, 227, 0.12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f5f5f7 78%);
}

.hero::after {
  content: '';
  position: absolute;
  right: 8%;
  bottom: -220px;
  left: 8%;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(94, 92, 230, 0.09), transparent 70%);
  pointer-events: none;
}

.hero__glow { display: none; }

.hero__content { position: relative; z-index: 1; max-width: 940px; text-align: center; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--spacing-xl);
  padding: 7px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.74);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  animation: heroIn 0.65s ease both;
}

.hero__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #34c759; }

.hero__title {
  margin-bottom: var(--spacing-lg);
  font-family: var(--font-display);
  font-size: clamp(3.35rem, 9vw, var(--font-size-6xl));
  font-weight: 750;
  letter-spacing: -0.065em;
  line-height: 0.98;
  animation: heroIn 0.65s 0.08s ease both;
}

.hero__title span {
  background: linear-gradient(90deg, #0071e3, #5e5ce6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__desc {
  max-width: 680px;
  margin: 0 auto var(--spacing-2xl);
  color: var(--color-text-tertiary);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.65;
  animation: heroIn 0.65s 0.16s ease both;
}

.hero__actions { display: flex; justify-content: center; gap: 12px; animation: heroIn 0.65s 0.24s ease both; }
.hero__scroll { display: none; }

.capabilities { padding: var(--spacing-5xl) 0; background: #ffffff; }
.capabilities__header, .cases-highlight__header, .clients__header { margin-bottom: var(--spacing-4xl); text-align: center; }
.capabilities__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.capability-card { min-height: 280px; padding: var(--spacing-2xl); display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-md); }
.capability-card__icon { width: 52px; height: 52px; margin-bottom: var(--spacing-sm); display: flex; align-items: center; justify-content: center; border-radius: 16px; background: #edf5ff; color: var(--color-accent); }
.capability-card:nth-child(2) .capability-card__icon { background: #f1efff; color: #5e5ce6; }
.capability-card:nth-child(3) .capability-card__icon { background: #ecf9f0; color: #248a3d; }
.capability-card__title { font-size: var(--font-size-xl); font-weight: 650; letter-spacing: -0.025em; }
.capability-card__desc { color: var(--color-text-tertiary); font-size: var(--font-size-sm); line-height: 1.75; }

.stats { padding: var(--spacing-4xl) 0; background: var(--color-bg-primary); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-item { min-height: 180px; padding: var(--spacing-2xl) var(--spacing-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.stat-item__number { color: var(--color-text-primary); font-family: var(--font-display); font-size: clamp(2.7rem, 5vw, var(--font-size-5xl)); font-weight: 720; letter-spacing: -0.055em; }
.stat-item__label { color: var(--color-text-tertiary); font-size: var(--font-size-sm); }

.cases-highlight { padding: var(--spacing-5xl) 0; background: #ffffff; }
.cases-highlight__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: var(--spacing-2xl); }
.case-card { position: relative; overflow: hidden; aspect-ratio: 4/3; border-radius: var(--radius-xl); background: #111; box-shadow: var(--shadow-sm); }
.case-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.case-card:hover img { transform: scale(1.035); }
.case-card__overlay { position: absolute; inset: auto 0 0; padding: 72px var(--spacing-xl) var(--spacing-xl); color: #ffffff; background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent); }
.case-card__tag { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.18); color: #ffffff; font-size: var(--font-size-xs); }
.case-card__title { margin-bottom: 5px; font-size: var(--font-size-lg); font-weight: 650; letter-spacing: -0.02em; }
.case-card__desc { color: rgba(255, 255, 255, 0.74); font-size: var(--font-size-sm); }
.cases-highlight__cta { text-align: center; }

.clients { padding: var(--spacing-5xl) 0; }
.clients__gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.client-photo { padding: 18px; overflow: hidden; border-radius: var(--radius-lg); background: #ffffff; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.client-photo img { width: 100%; height: 160px; object-fit: contain; border-radius: var(--radius-md); transition: transform var(--transition-base); }
.client-photo:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.client-photo:hover img { transform: scale(1.035); }

.lightbox { display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; padding: var(--spacing-xl); background: rgba(0, 0, 0, 0.88); cursor: pointer; }
.lightbox--open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: var(--radius-lg); animation: lightboxIn 0.25s ease both; }
.lightbox__close { position: absolute; top: 24px; right: 24px; z-index: 2001; display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #ffffff; font-size: 22px; }

.cta-section { padding: var(--spacing-5xl) 0; background: #ffffff; }
.cta-section__inner { position: relative; overflow: hidden; padding: var(--spacing-4xl) var(--spacing-2xl); border-radius: var(--radius-2xl); background: linear-gradient(135deg, #1d1d1f 0%, #2d2d32 65%, #1d2740 100%); color: #ffffff; text-align: center; }
.cta-section__inner::before { content: ''; position: absolute; top: -160px; left: 50%; width: 520px; height: 340px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(0, 113, 227, 0.3), transparent 68%); pointer-events: none; }
.cta-section__title, .cta-section__desc, .cta-section .btn { position: relative; }
.cta-section__title { margin-bottom: var(--spacing-md); font-size: clamp(2.1rem, 5vw, var(--font-size-4xl)); font-weight: 700; letter-spacing: -0.045em; }
.cta-section__desc { max-width: 520px; margin: 0 auto var(--spacing-2xl); color: rgba(255, 255, 255, 0.66); font-size: var(--font-size-lg); line-height: 1.7; }

@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lightboxIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

@media (max-width: 1024px) {
  .capabilities__grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
  .capability-card { min-height: 0; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .cases-highlight__grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto var(--spacing-2xl); }
  .clients__gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hero { min-height: auto; padding: 140px var(--spacing-lg) 90px; }
  .hero__title { font-size: clamp(3rem, 15vw, 4.4rem); }
  .hero__actions { flex-direction: column; align-items: stretch; max-width: 280px; margin: 0 auto; }
  .capabilities, .cases-highlight, .clients, .cta-section { padding: var(--spacing-4xl) 0; }
  .stats__grid { gap: 10px; }
  .stat-item { min-height: 145px; padding: var(--spacing-lg) 10px; }
  .clients__gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
  .client-photo { padding: 10px; }
  .client-photo img { height: 110px; }
  .cta-section__inner { padding: var(--spacing-3xl) var(--spacing-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__badge, .hero__title, .hero__desc, .hero__actions { animation: none; }
}