/* Highway Hop - Download Page Styles */

/* Download Hero */
.hhp-91-download-hero {
  background: linear-gradient(135deg, var(--hhp-91-teal) 0%, var(--hhp-91-amber) 50%, var(--hhp-91-orange) 100%);
  color: white;
  padding: var(--hhp-91-space-2xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hhp-91-download-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  animation: float-bubbles 15s ease-in-out infinite;
}

@keyframes float-bubbles {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.hhp-91-download-hero h1 {
  color: white;
  margin-bottom: var(--hhp-91-space-md);
}

/* Download CTA */
.hhp-91-download-cta {
  background: white;
  border-radius: var(--hhp-91-radius-xl);
  padding: var(--hhp-91-space-xl);
  box-shadow: var(--hhp-91-shadow-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: var(--hhp-91-space-xl) 0;
}

.hhp-91-download-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--hhp-91-teal), var(--hhp-91-amber), var(--hhp-91-orange));
  background-size: 300% 100%;
  animation: gradient-flow 3s ease-in-out infinite;
}

@keyframes gradient-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hhp-91-download-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hhp-91-space-md);
  padding: var(--hhp-91-space-lg) var(--hhp-91-space-xl);
  background: linear-gradient(135deg, var(--hhp-91-amber), var(--hhp-91-orange));
  color: white;
  text-decoration: none;
  border-radius: var(--hhp-91-radius-xl);
  font-size: 1.25rem;
  font-weight: 700;
  box-shadow: var(--hhp-91-shadow-lg);
  transition: var(--hhp-91-transition);
  position: relative;
  overflow: hidden;
}

.hhp-91-download-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.hhp-91-download-btn:hover::before {
  left: 100%;
}

.hhp-91-download-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--hhp-91-shadow-lg);
  color: white;
  text-decoration: none;
}

.hhp-91-download-icon {
  font-size: 2rem;
}

/* Compatibility Grid */
.hhp-91-compat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--hhp-91-space-lg);
  margin: var(--hhp-91-space-xl) 0;
}

.hhp-91-compat-item {
  background: white;
  border-radius: var(--hhp-91-radius-lg);
  padding: var(--hhp-91-space-lg);
  box-shadow: var(--hhp-91-shadow-sm);
  text-align: center;
  transition: var(--hhp-91-transition);
  position: relative;
  overflow: hidden;
}

.hhp-91-compat-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--hhp-91-teal);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.hhp-91-compat-item:hover::after {
  transform: scaleX(1);
}

.hhp-91-compat-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--hhp-91-shadow-md);
}

.hhp-91-compat-icon {
  font-size: 3rem;
  margin-bottom: var(--hhp-91-space-md);
  color: var(--hhp-91-teal);
}

/* Requirements List */
.hhp-91-req-list {
  background: var(--hhp-91-gray-light);
  border-radius: var(--hhp-91-radius-lg);
  padding: var(--hhp-91-space-xl);
  margin: var(--hhp-91-space-xl) 0;
}

.hhp-91-req-item {
  display: flex;
  align-items: center;
  gap: var(--hhp-91-space-md);
  padding: var(--hhp-91-space-md) 0;
  border-bottom: 1px solid rgba(107, 114, 128, 0.2);
  transition: var(--hhp-91-transition-fast);
}

.hhp-91-req-item:last-child {
  border-bottom: none;
}

.hhp-91-req-item:hover {
  background: rgba(245, 158, 11, 0.1);
  border-radius: var(--hhp-91-radius-md);
  padding-left: var(--hhp-91-space-md);
  padding-right: var(--hhp-91-space-md);
}

.hhp-91-req-icon {
  width: 30px;
  height: 30px;
  background: var(--hhp-91-teal);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Installation Steps */
.hhp-91-install-steps {
  background: white;
  border-radius: var(--hhp-91-radius-xl);
  padding: var(--hhp-91-space-xl);
  box-shadow: var(--hhp-91-shadow-md);
  position: relative;
}

.hhp-91-step-item {
  display: flex;
  align-items: flex-start;
  gap: var(--hhp-91-space-lg);
  margin-bottom: var(--hhp-91-space-xl);
  position: relative;
}

.hhp-91-step-item:last-child {
  margin-bottom: 0;
}

.hhp-91-step-item::after {
  content: '';
  position: absolute;
  left: 25px;
  top: 50px;
  bottom: -30px;
  width: 2px;
  background: linear-gradient(to bottom, var(--hhp-91-amber), var(--hhp-91-teal));
}

.hhp-91-step-item:last-child::after {
  display: none;
}

.hhp-91-step-num {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--hhp-91-amber), var(--hhp-91-orange));
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: var(--hhp-91-shadow-md);
  position: relative;
  z-index: 1;
}

/* Privacy Assurance */
.hhp-91-privacy-assurance {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 2px solid var(--hhp-91-teal);
  border-radius: var(--hhp-91-radius-lg);
  padding: var(--hhp-91-space-xl);
  margin: var(--hhp-91-space-xl) 0;
  position: relative;
}

.hhp-91-privacy-assurance::before {
  content: '🔒';
  position: absolute;
  top: -15px;
  left: var(--hhp-91-space-lg);
  background: var(--hhp-91-teal);
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* Monetization Honesty */
.hhp-91-honesty-card {
  background: linear-gradient(135deg, #fef7cd, #fde68a);
  border: 2px solid var(--hhp-91-amber);
  border-radius: var(--hhp-91-radius-lg);
  padding: var(--hhp-91-space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hhp-91-honesty-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(245, 158, 11, 0.1) 10px,
    rgba(245, 158, 11, 0.1) 20px
  );
  pointer-events: none;
}

.hhp-91-honesty-content {
  position: relative;
  z-index: 1;
}

/* Animation Keyframes */
@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-bounce {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotate-in {
  0% {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes pulse-highlight {
  0% {
    opacity: 0;
    box-shadow: 0 0 0 rgba(245, 158, 11, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 0 rgba(245, 158, 11, 0);
  }
}

@keyframes text-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
  }
}

/* Animation Classes */
[data-anim="slide-in-left"].is-visible {
  animation: slide-in-left 0.8s ease-out forwards;
}

[data-anim="slide-in-right"].is-visible {
  animation: slide-in-right 0.8s ease-out forwards;
}

[data-anim="fade-in-up"].is-visible {
  animation: fade-in-up 0.8s ease-out forwards;
}

[data-anim="scale-bounce"].is-visible {
  animation: scale-bounce 0.6s ease-out forwards;
}

[data-anim="rotate-in"].is-visible {
  animation: rotate-in 0.8s ease-out forwards;
}

[data-anim="pulse-highlight"].is-visible {
  animation: pulse-highlight 1s ease-out forwards;
}

[data-anim="text-reveal"].is-visible {
  animation: text-reveal 1s ease-out forwards;
}

[data-anim="stagger-up"] .hhp-91-stagger-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-anim="stagger-up"] .hhp-91-stagger-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
  .hhp-91-compat-grid {
    grid-template-columns: 1fr;
  }
  
  .hhp-91-download-btn {
    padding: var(--hhp-91-space-md) var(--hhp-91-space-lg);
    font-size: 1.125rem;
  }
  
  .hhp-91-download-icon {
    font-size: 1.5rem;
  }
  
  .hhp-91-step-item {
    flex-direction: column;
    text-align: center;
  }
  
  .hhp-91-step-item::after {
    display: none;
  }
  
  .hhp-91-install-steps {
    padding: var(--hhp-91-space-lg);
  }
}

@media (max-width: 480px) {
  .hhp-91-download-hero {
    padding: var(--hhp-91-space-xl) 0;
  }
  
  .hhp-91-download-cta {
    padding: var(--hhp-91-space-lg);
  }
  
  .hhp-91-req-list {
    padding: var(--hhp-91-space-lg);
  }
  
  .hhp-91-compat-icon {
    font-size: 2rem;
  }
  
  .hhp-91-step-num {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}
/* ===== Spacing ===== */
.mt-xl { margin-top: var(--hhp-91-space-xl); }
.mt-lg { margin-top: var(--hhp-91-space-lg); }
.mt-md { margin-top: var(--hhp-91-space-md); }

.mb-xl { margin-bottom: var(--hhp-91-space-xl); }
.mb-lg { margin-bottom: var(--hhp-91-space-lg); }
.mb-xs { margin-bottom: var(--hhp-91-space-xs); }

/* ===== Typography ===== */
.lead { font-size: 1.125rem; line-height: 1.6; }
.text-sm { font-size: 0.875rem; line-height: 1.6; }
.text-muted { color: var(--hhp-91-gray-medium); }

/* ===== Layout helpers ===== */
.narrow-600 { max-width: 600px; margin-inline: auto; }

/* Списки без маркеров/отступов */
.list-unstyled { list-style: none; padding: 0; margin: 0; }

/* ===== Accessible skip link ===== */
.hhp-91-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 8px 12px;
  background: var(--hhp-91-amber);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}
.hhp-91-skip-link:focus {
  left: 12px;
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}