@charset "UTF-8"; /*# The coding page CSS */
/**
 * =============================================================================
 * @encoding UTF-8
 * @author [Zerohold](//zerohold.sd1.su)
 * @project [SD Pro Master](//sdpromaster.ru)
 * @summary Стили для главной страницы + Иконки и графика.
 * @created 2025-10
 * @modified 2026-01
 *
 * @file D:/controls-psr/sdpromaster.ru/cdn.sdpromaster.ru/css/index.css
 * @link https://cdn.sdpromaster.ru/css/index.css
 *
 * @remarks
 * - Inline комментарии запрещены
 * =============================================================================
 */

/* НОВЫЕ СТИЛИ ДЛЯ ПРИВЕТСТВЕННОЙ СЕКЦИИ */

.hero-section
{
  position: relative;
  color: rgb(255, 255, 255);
  padding: 8rem 0;
  overflow: hidden;
  background-image: linear-gradient(-45deg, rgb(238, 119, 82), rgb(60, 63, 231), rgb(35, 166, 213), rgb(35, 213, 171));
  background-size: 400% 400%;
  animation: gradient-animation 15s ease infinite;
  border-bottom: 5px solid var(--primary-dark);
}

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

.hero-content
{
  position: relative;
  z-index: 1;
  animation: fade-in-up 1s ease-out forwards;
}

@keyframes fade-in-up
{
  from
  {
    opacity: 0;
  }
  to
  {
    opacity: 1;
  }
}

.bg-hero-gradient
{
  background-image: radial-gradient(circle at 102% -2%, rgb(248, 227, 245) 7%, transparent 40.8424350929%), radial-gradient(circle at 7% 81%, rgba(176, 209, 248, 0.43) 16%, transparent 53%), radial-gradient(circle at 39% 52%, rgba(206, 247, 239, 0.5) 6%, transparent 68%), radial-gradient(circle at 11% 29%, rgb(255, 255, 255) 8%, transparent 74%), radial-gradient(circle at 90% 50%, rgb(242, 243, 221) 2%, transparent 85%);
}

.hero-icon
{
  color: rgb(252, 211, 77);
  text-shadow: 0 0 20px rgba(252, 211, 77, 0.8), 0 0 30px rgba(252, 211, 77, 0.5);
  animation: float-glow 4s ease-in-out infinite;
}

@keyframes float-glow
{
  0%, 100%
  {
    transform: scale(1);
    opacity: 1;
  }
  50%
  {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

.hero-title,
.hero-subtitle
{
  animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation-delay: 0.2s;
}

@keyframes text-focus-in
{
  0%
  {
    filter: blur(12px);
    opacity: 0;
  }
  100%
  {
    filter: blur(0px);
    opacity: 1;
  }
}

.hero-buttons .btn
{
  animation: fade-in-up 0.8s ease-out backwards;
}

.hero-buttons .btn:nth-child(1)
{
  animation-delay: 0.4s;
}

.hero-buttons .btn:nth-child(2)
{
  animation-delay: 0.6s;
}


/* Фоновые анимированные фигуры */
.hero-section::before
{
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: float-shape 15s infinite linear;
  z-index: 0;
}

.hero-section::after
{
  content: '';
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 300px;
  height: 300px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  animation: float-shape 20s infinite linear reverse;
  z-index: 0;
}

@keyframes float-shape
{
  0%
  {
    transform: rotate(0deg);
  }
  25%
  {
    transform: rotate(90deg);
  }
  50%
  {
    transform: rotate(180deg);
  }
  75%
  {
    transform: rotate(270deg);
  }
  100%
  {
    transform: rotate(360deg);
  }
}

.service-card,
.benefit-card,
.step-card,
.payment-card,
.testimonial-card
{
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover,
.benefit-card:hover,
.step-card:hover,
.payment-card:hover,
.testimonial-card:hover
{
  box-shadow: 0 10px 20px rgba(49, 38, 81, 0.15);
}

/* --- СХЕМА РАБОТЫ */

.work-scheme-section
{
  padding: 4rem 0;
  background-color: var(--bg-secondary);
}

.step-circle
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
  border-width: 4px;
  border-style: solid;
  border-radius: 50%;

  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text-primary);

  background-color: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}

.step-circle-success
{
  border-color: var(--success);
}

.step-circle-warning
{
  border-color: var(--warning);
}

.step-circle-teal
{
  border-color: rgb(13, 148, 136);
}

.step-title
{
  margin-bottom: 0.25rem;

  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.step-desc
{
  font-size: 0.875rem;
  color: var(--text-muted);
}

.step-arrow
{
  display: none;
}

@media (min-width: 768px)
{
  .step-arrow
  {
    display: flex;
    flex: 0 0 auto;
    width: 8.33333333%;
    height: 80px;
    align-items: center;
    justify-content: center;

    font-size: 2.25rem;
    color: var(--text-muted);
    line-height: 1;
  }

  .step-arrow::before
  {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M598.6 297.4C611.1 309.9 611.1 330.2 598.6 342.7L470.6 470.7C461.4 479.9 447.7 482.6 435.7 477.6C423.7 472.6 416 460.9 416 448L416 384L80 384C53.5 384 32 362.5 32 336L32 304C32 277.5 53.5 256 80 256L416 256L416 192C416 179.1 423.8 167.4 435.8 162.4C447.8 157.4 461.5 160.2 470.7 169.3L598.7 297.3z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }
}