/* ==========================================================================
   Homepage
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 100% -10%, var(--c-brand-50), transparent 62%),
    radial-gradient(700px 420px at -10% 110%, #eceef1, transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--c-soft) 100%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding-block: 28px 44px;
}

.hero__grid > * {
  min-width: 0;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 6px 14px 6px 12px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink-2);
}

.hero__badge-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--c-wa);
  animation: pulse-dot 1.8s ease-out infinite;
}

.hero__title {
  font-size: var(--fs-hero);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
}

.hero__title em {
  font-style: normal;
  color: var(--c-brand);
}

.hero__lead {
  font-size: var(--fs-md);
  color: var(--c-muted);
  max-width: 560px;
  margin-bottom: var(--sp-6);
}

.hero__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
}

.hero__actions .btn {
  min-height: 50px;
}

@media (max-width: 359.98px) {
  .hero__actions .btn {
    padding-inline: 10px;
    font-size: var(--fs-sm);
    white-space: normal;
    text-align: center;
  }
}

.hero__phone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.hero__phone a {
  font-family: var(--font-latin);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-ink);
  direction: ltr;
  letter-spacing: 0.02em;
}

.hero__phone a:hover {
  color: var(--c-brand);
}

.hero__trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 600px;
}

.hero__trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink-2);
  line-height: 1.45;
}

.hero__trust .i {
  width: 22px;
  height: 22px;
  color: var(--c-brand);
}

/* Video frame */
.hero-media {
  position: relative;
  padding: 0;
}

.hero-stage {
  position: relative;
}

.hero-video {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #0d0f12 center / cover no-repeat;
  box-shadow: var(--sh-3);
  border: 1px solid rgba(255, 255, 255, 0.6);
  isolation: isolate;
}

.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video__bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 28px 14px 12px;
  background: linear-gradient(to top, rgba(10, 11, 13, 0.78), transparent);
  color: #fff;
  font-size: var(--fs-xs);
}

.hero-video__bar p {
  margin: 0;
  line-height: 1.5;
}

.hero-video__bar b {
  display: block;
  font-size: var(--fs-sm);
}

.hero-video__toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-video__toggle:hover {
  background: rgba(255, 255, 255, 0.28);
}

.hero-video__toggle .i {
  width: 18px;
  height: 18px;
}

.hero-video__toggle [data-icon="play"] {
  display: none;
}

.hero-video.is-paused .hero-video__toggle [data-icon="play"] {
  display: block;
}

.hero-video.is-paused .hero-video__toggle [data-icon="pause"] {
  display: none;
}

.hero-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--sh-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.35;
}

.hero-float .i {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 8px;
  background: var(--c-brand-50);
  color: var(--c-brand);
}

.hero-float small {
  display: block;
  font-weight: 400;
  color: var(--c-muted);
}

.hero-float--a {
  display: none;
  top: 10px;
  inset-inline-start: 10px;
}

/* Small phones: keep the video clean, show only the play/pause control */
@media (max-width: 479.98px) {
  .hero-video {
    border-radius: var(--r-lg);
  }
  .hero-video__bar {
    padding: 0;
    inset-inline: auto 10px;
    bottom: 10px;
    background: none;
  }
  .hero-video__bar p {
    display: none;
  }
  .hero-video__toggle {
    width: 40px;
    height: 40px;
    background: rgba(10, 11, 13, 0.55);
  }
}

@media (min-width: 480px) {
  .hero-float--a {
    display: flex;
  }
}

.hero-devices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.hero-devices a {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--c-line);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--c-ink-2);
  transition: border-color var(--dur-1), color var(--dur-1);
}

.hero-devices a:hover {
  border-color: var(--c-brand-100);
  color: var(--c-brand);
}

.hero-devices img {
  width: 52px;
  height: 52px;
}

@media (min-width: 480px) {
  .hero__trust {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
  }
  .hero-devices {
    margin-top: 28px;
  }
  .hero-devices a {
    font-size: var(--fs-xs);
  }
  .hero-devices img {
    width: 64px;
    height: 64px;
  }
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-areas:
      "content media"
      "trust media";
    gap: 28px 56px;
    padding-block: 56px 72px;
  }
  .hero__content {
    grid-area: content;
    align-self: end;
  }
  .hero-media {
    grid-area: media;
    align-self: center;
  }
  .hero__trust {
    grid-area: trust;
    align-self: start;
  }
  .hero-float--a {
    top: -18px;
    inset-inline-start: -18px;
  }

  .hero__trust {
    grid-template-columns: repeat(4, 1fr);
    max-width: none;
  }
  .hero__trust li {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (min-width: 1440px) {
  .hero__grid {
    padding-block: 72px 88px;
  }
}

/* ---------- Problems tabs ---------- */
.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: var(--sp-5);
  padding-bottom: 2px;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs .chip {
  cursor: pointer;
}

@media (min-width: 768px) {
  .card-grid--home {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.center-link {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-8);
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  gap: 14px;
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  padding: 18px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--c-line);
}

.step__num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--c-brand), var(--c-brand-700));
  color: #fff;
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: 1.125rem;
  box-shadow: var(--sh-brand);
}

.step h3 {
  margin: 0;
  font-size: var(--fs-base);
  align-self: end;
}

.step p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .step {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .step__num {
    grid-row: auto;
    margin-bottom: 10px;
  }
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 47px;
    inset-inline-end: -21px;
    width: 22px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--c-line-2) 0 4px, transparent 4px 8px);
  }
}

/* ---------- Why us (dark) ---------- */
.section--dark {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(179, 18, 46, 0.35), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgba(201, 205, 211, 0.12), transparent 60%),
    var(--c-ink);
  color: #c4c8ce;
}

.section--dark h2,
.section--dark h3 {
  color: #fff;
}

.section--dark .section-head p {
  color: #a9aeb6;
}

.section--dark .eyebrow {
  color: #ff8a9c;
}

.why-grid {
  display: grid;
  gap: 14px;
}

.why-card {
  position: relative;
  padding: 22px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color var(--dur-2), transform var(--dur-2) var(--ease);
}

.why-card:hover {
  border-color: rgba(255, 255, 255, 0.24);
}

.why-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: linear-gradient(145deg, #e9ebee, #9aa1ab);
  color: var(--c-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.why-card h3 {
  font-size: var(--fs-base);
  margin-bottom: 6px;
}

.why-card p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.why-card--wide {
  background: linear-gradient(140deg, rgba(179, 18, 46, 0.35), rgba(102, 20, 42, 0.15));
  border-color: rgba(255, 138, 156, 0.25);
}

@media (min-width: 640px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .why-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  .why-card--wide {
    grid-column: span 2;
  }
}

/* ---------- Areas ---------- */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.area-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--c-line);
  transition: border-color var(--dur-1), box-shadow var(--dur-2);
}

.area-card:hover {
  border-color: var(--c-brand-100);
  box-shadow: var(--sh-2);
}

.area-card .i {
  width: 28px;
  height: 28px;
  color: var(--c-brand);
}

.area-card h3 {
  margin: 4px 0 0;
  font-size: var(--fs-md);
}

.area-card small {
  font-family: var(--font-latin);
  color: var(--c-muted);
  font-size: var(--fs-xs);
}

.area-card span.go {
  margin-top: auto;
  padding-top: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-brand);
}

.area-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .areas-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .area-card:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* ---------- Before you call (tips) ---------- */
.tips {
  display: grid;
  gap: 24px;
  align-items: center;
}

.tips__visual {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 8px;
  padding: 24px 18px 0;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--c-brand-50), #fff 70%);
  border: 1px solid var(--c-line);
  overflow: hidden;
}

.tips__visual img {
  width: 100%;
}

.tips__label {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--sh-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.tips__label .i {
  color: var(--c-brand);
}

.checklist {
  display: grid;
  gap: 12px;
  margin-top: var(--sp-5);
}

.checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.checklist .i {
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 50%;
  background: #eaf6ef;
  color: var(--c-success);
}

.checklist li.warn .i {
  background: var(--c-brand-50);
  color: var(--c-brand);
}

.checklist b {
  display: block;
  color: var(--c-ink);
  font-size: var(--fs-sm);
}

.checklist span {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

@media (min-width: 1024px) {
  .tips {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
  }
}

/* ---------- FAQ layout ---------- */
.faq-layout {
  display: grid;
  gap: 24px;
}

.contact-card {
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--c-ink);
  color: #c4c8ce;
}

.contact-card h3 {
  color: #fff;
  font-size: var(--fs-md);
}

.contact-card p {
  font-size: var(--fs-sm);
}

.contact-card .btn {
  width: 100%;
}

.contact-card__actions {
  display: grid;
  gap: 10px;
}

@media (min-width: 1024px) {
  .faq-layout {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 56px;
    align-items: start;
  }
  .faq-layout__aside {
    position: sticky;
    top: calc(var(--header-h) + 80px);
  }
}

/* ---------- Disclaimer strip ---------- */
.disclaimer {
  padding-block: 18px;
  background: var(--c-soft);
  border-top: 1px solid var(--c-line);
}