/* ===== RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
body {
  font-family: 'Arial', sans-serif;
  background: #000;
  color: #fff;
  line-height: 1.4;
}

/* ===== BUTTON ===== */
.btn {
  display: inline-block;
  padding: 18px 44px;
  background: #fff;
  color: #000;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: transform .25s, box-shadow .25s, background .25s, color .25s;
  position: relative;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255,255,255,.2);
}

/* Hero button — gradient, glow */
.btn--hero {
  background: linear-gradient(135deg, #ff4757 0%, #ff7a5c 100%);
  color: #fff;
  padding: 20px 56px;
  font-size: 15px;
  box-shadow: 0 10px 30px rgba(255,71,87,.45), 0 0 0 1px rgba(255,255,255,.1) inset;
  position: relative;
  overflow: hidden;
}
.btn--hero::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: left .6s;
}
.btn--hero:hover::before { left: 100%; }
.btn--hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(255,71,87,.6), 0 0 0 1px rgba(255,255,255,.2) inset;
}

/* ===== SECTION TITLE ===== */
.section-title {
  text-align: center;
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 60px;
  color: #fff;
}
.section-title--dark { color: #000; }

/* ===== 1. HERO ===== */
.hero {
  min-height: 100vh;
  background:
    linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.8)),
    url('https://images.unsplash.com/photo-1593305841991-05c297ba4575?w=1600') center/cover no-repeat;
  padding: 30px 20px 60px;
  display: flex;
  flex-direction: column;
}

.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.header__city {
  text-align: center;
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 15px;
}
.header__phone {
  text-align: center;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 15px;
}
.header__logo {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.header__logo img { width: 78%; height: auto; }

.hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 40px 0;
}
.hero__title {
  font-size: 54px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.25;
  margin-bottom: 40px;
  text-shadow: 0 2px 20px rgba(0,0,0,.9);
}
.hero__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  width: 100%;
}
.hero__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.hero__pc {
  max-height: 280px;
  width: auto;
  margin: 0 auto;
}
.hero__pc--left,
.hero__pc--right { transform: scaleX(-1); }
.hero__sub {
  font-size: 22px;
  text-shadow: 0 2px 14px rgba(0,0,0,.9);
}

/* ===== 2. CRITERIA ===== */
.criteria {
  background: #000;
  padding: 80px 20px;
}
.criteria__item {
  max-width: 800px;
  margin: 0 auto 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 50px;
}
.criteria__item:last-child { margin-bottom: 0; }
.criteria__item img {
  width: 100%;
  max-width: 320px;
  justify-self: center;
}
.criteria__text h3 {
  font-size: 30px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.criteria__text p {
  font-size: 16px;
  color: #bbb;
}

/* ===== 3. HOW ===== */
.how {
  background: #fff;
  color: #000;
  padding: 80px 20px;
}
.how__steps {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.how__step {
  text-align: center;
  padding: 20px;
}
.how__num {
  width: 70px; height: 70px;
  background: #000;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  font-weight: 800;
  margin: 0 auto 20px;
}
.how__step h3 {
  font-size: 22px;
  margin-bottom: 12px;
}
.how__step p {
  color: #555;
  font-size: 15px;
}

/* ===== 4. CTA ===== */
.cta {
  position: relative;
  background: radial-gradient(ellipse at top, #1a1a2e 0%, #000 60%);
  padding: 120px 20px;
  text-align: center;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(231,30,46,0.25) 0%, transparent 60%);
  pointer-events: none;
}
.cta__badge {
  position: relative;
  display: inline-block;
  padding: 8px 22px;
  border: 1px solid rgba(231,30,46,0.6);
  border-radius: 30px;
  color: #ff4757;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 30px;
  background: rgba(231,30,46,0.08);
}
.cta__title {
  position: relative;
  font-size: 42px;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  max-width: 900px;
  margin-left: auto; margin-right: auto;
}
.cta__accent {
  background: linear-gradient(90deg, #ff4757, #ff7a5c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cta__sub {
  position: relative;
  font-size: 17px;
  color: #aaa;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto; margin-right: auto;
}
.cta__btn {
  position: relative;
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,71,87,0.6); }
  70%  { box-shadow: 0 0 0 20px rgba(255,71,87,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,71,87,0); }
}
.cta__stats {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 60px;
  flex-wrap: wrap;
}
.cta__stat { text-align: center; }
.cta__num {
  font-size: 36px;
  font-weight: 900;
  background: linear-gradient(90deg, #ff4757, #ff7a5c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cta__label {
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 4px;
}

/* ===== 5. FOOTER ===== */
.footer {
  background: #000;
  padding: 60px 20px 40px;
  text-align: center;
  border-top: 1px solid #111;
}
.footer__logo {
  width: 160px; height: 160px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 30px;
  overflow: hidden;
}
.footer__logo img { width: 78%; height: auto; }
.footer__contact {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 3px;
  margin-bottom: 16px;
}
.footer__policy {
  display: inline-block;
  font-size: 14px;
  color: #888;
}
.footer__policy:hover { color: #fff; }

/* ===== WHATSAPP WIDGET ===== */
.wa-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  z-index: 1000;
  transition: transform .2s, box-shadow .2s;
}
.wa-widget:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.3);
}
.wa-widget__icon {
  width: 28px;
  height: 28px;
  fill: #fff;
  position: relative;
  z-index: 2;
}
.wa-widget__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: wa-pulse 2.4s ease-out infinite;
  z-index: 1;
  opacity: 0;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: .5; }
  100% { transform: scale(1.5); opacity: 0; }
}
.wa-widget__label { display: none; }

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .header__city,
  .header__phone { font-size: 13px; letter-spacing: 2px; }
  .header__logo { width: 60px; height: 60px; }

  .hero { padding: 20px 16px 40px; }
  .hero__title { font-size: 26px; letter-spacing: 1px; margin-bottom: 30px; }
  .hero__row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero__pc { max-height: none; width: 70%; }
  .hero__pc--right { display: none; }
  .hero__sub { font-size: 16px; }

  .section-title { font-size: 22px; margin-bottom: 40px; }

  .criteria { padding: 60px 16px; }
  .criteria__item {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
    margin-bottom: 50px;
  }
  .criteria__text h3 { font-size: 22px; }

  .how { padding: 60px 16px; }
  .how__steps { grid-template-columns: 1fr; gap: 30px; }

  .cta { padding: 70px 16px; }
  .cta__title { font-size: 22px; letter-spacing: 0; }
  .cta__sub { font-size: 14px; }
  .cta__stats { gap: 30px; margin-top: 40px; }
  .cta__num { font-size: 26px; }

  .footer__logo { width: 130px; height: 130px; }
  .footer__contact { font-size: 16px; letter-spacing: 2px; }

  .wa-widget { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .wa-widget__icon { width: 26px; height: 26px; }
}