/* =======================================================================
   STATIC PAGES — Unified CSS for all Qukasoft static pages
   BEM prefix: .th-static__*
   Tokens: --th-* only (zero hardcoded values)
   Breakpoints: 768px (tablet), 480px (mobile)
   ======================================================================= */


/* == WRAPPER ============================================================ */

.th-static {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--th-space-6) var(--th-space-4);
  font-family: var(--th-font-primary);
  color: var(--th-color-text);
  line-height: var(--th-leading-relaxed);
}


/* == HERO =============================================================== */

.th-static__hero {
  display: flex;
  align-items: center;
  gap: var(--th-space-8);
  background: var(--th-color-bg);
  border: var(--th-border-default);
  border-radius: var(--th-radius-2xl);
  padding: var(--th-space-8);
  box-shadow: var(--th-shadow-lg);
  overflow: hidden;
}

.th-static__hero-content {
  flex: 1 1 400px;
  min-width: 0;
}

.th-static__hero-visual {
  flex: 0 0 340px;
  text-align: center;
}

.th-static__hero-visual img {
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: var(--th-radius-xl);
  object-fit: cover;
}

.th-static__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-1-5);
  padding: var(--th-space-1-5) var(--th-space-3);
  border-radius: var(--th-radius-full);
  background: var(--th-ink-900);
  color: var(--th-neutral-0);
  font-size: var(--th-text-xs-plus);
  font-weight: 700;
  letter-spacing: var(--th-tracking-wide);
  text-transform: uppercase;
}

.th-static__badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.th-static__title {
  margin: var(--th-space-4) 0 var(--th-space-3);
  font-size: var(--th-text-3xl);
  font-weight: 800;
  line-height: var(--th-leading-tight);
  color: var(--th-color-text);
}

.th-static__subtitle {
  margin: 0;
  font-size: var(--th-text-base);
  line-height: 1.75;
  color: var(--th-color-text-secondary);
}


/* == HIGHLIGHTS ========================================================= */

.th-static__highlights {
  display: flex;
  gap: var(--th-space-3);
  margin-top: var(--th-space-5);
  flex-wrap: wrap;
}

.th-static__highlight {
  flex: 1 1 120px;
  padding: var(--th-space-3) var(--th-space-4);
  border-radius: var(--th-radius-xl);
  border: var(--th-border-default);
  background: var(--th-color-bg-page);
  text-align: center;
}

.th-static__highlight-value {
  font-size: var(--th-text-lg);
  font-weight: 800;
  color: var(--th-color-text);
}

.th-static__highlight-label {
  margin-top: var(--th-space-1);
  font-size: var(--th-text-xs-plus);
  color: var(--th-color-text-muted);
}


/* == INFO STRIP ========================================================= */

.th-static__info-strip {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: var(--th-space-3);
  margin-top: var(--th-space-6);
}

.th-static__info-card {
  border-radius: var(--th-radius-2xl);
  padding: var(--th-space-4);
}

.th-static__info-card--green {
  background: var(--th-emerald-50);
  border: 1px solid var(--th-emerald-100);
}

.th-static__info-card--orange {
  background: var(--th-orange-50);
  border: 1px solid var(--th-orange-100);
}

.th-static__info-card--gray {
  background: var(--th-color-bg-page);
  border: 1px solid var(--th-color-border-light);
}

.th-static__info-label {
  font-size: var(--th-text-xs-plus);
  font-weight: 900;
  letter-spacing: var(--th-tracking-wide);
  text-transform: uppercase;
}

.th-static__info-card--green .th-static__info-label { color: var(--th-emerald-800); }
.th-static__info-card--orange .th-static__info-label { color: var(--th-orange-800); }
.th-static__info-card--gray .th-static__info-label { color: var(--th-neutral-700); }

.th-static__info-value {
  margin-top: var(--th-space-2);
  font-size: var(--th-text-2xl);
  font-weight: 900;
  color: var(--th-emerald-900);
  display: flex;
  align-items: center;
  gap: var(--th-space-2);
  flex-wrap: wrap;
}

.th-static__info-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-1);
  padding: var(--th-space-1) var(--th-space-2);
  border-radius: var(--th-radius-md);
  border: 1px solid var(--th-emerald-200);
  background: var(--th-neutral-0);
  color: var(--th-emerald-700);
  font-size: var(--th-text-xs-plus);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--th-transition-fast);
  font-family: var(--th-font-primary);
}

.th-static__info-copy:hover {
  background: var(--th-emerald-50);
  border-color: var(--th-emerald-300);
}

.th-static__info-copy svg {
  width: 14px;
  height: 14px;
}

.th-static__info-desc {
  margin-top: var(--th-space-2);
  font-size: var(--th-text-sm);
  line-height: var(--th-leading-relaxed);
}

.th-static__info-card--green .th-static__info-desc { color: var(--th-emerald-800); }
.th-static__info-card--orange .th-static__info-desc { color: var(--th-orange-900); }
.th-static__info-card--gray .th-static__info-desc { color: var(--th-color-text-secondary); }


/* == SECTION TITLE ====================================================== */

.th-static__section-title {
  display: flex;
  align-items: center;
  gap: var(--th-space-2);
  margin: var(--th-space-8) 0 var(--th-space-4);
  font-size: var(--th-text-xl);
  font-weight: 800;
  color: var(--th-color-text);
}

.th-static__section-title svg {
  flex-shrink: 0;
  color: var(--th-color-text-muted);
}


/* == TEXT BLOCK ========================================================== */

.th-static__text {
  margin: 0 0 var(--th-space-4);
  font-size: var(--th-text-base);
  line-height: 1.8;
  color: var(--th-color-text-secondary);
}

.th-static__text b {
  color: var(--th-color-text);
  font-weight: 700;
}


/* == STEPS (Timeline) =================================================== */

.th-static__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.th-static__step {
  display: flex;
  gap: var(--th-space-4);
  padding: var(--th-space-5) 0;
  position: relative;
}

.th-static__step::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--th-color-border-light);
}

.th-static__step:first-child::before { top: 50%; }
.th-static__step:last-child::before { bottom: 50%; }

.th-static__step-num {
  position: relative;
  z-index: 1;
  min-width: 40px;
  height: 40px;
  border-radius: var(--th-radius-full);
  background: var(--th-ink-900);
  color: var(--th-neutral-0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--th-text-base);
  flex-shrink: 0;
}

.th-static__step-body {
  flex: 1;
  min-width: 0;
}

.th-static__step-title {
  font-size: var(--th-text-md);
  font-weight: 800;
  color: var(--th-color-text);
}

.th-static__step-desc {
  margin-top: var(--th-space-1-5);
  font-size: var(--th-text-base);
  line-height: 1.7;
  color: var(--th-color-text-secondary);
}

.th-static__step-desc b {
  color: var(--th-color-text);
  font-weight: 700;
}

.th-static__code-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-1-5);
  margin-top: var(--th-space-3);
  padding: var(--th-space-2) var(--th-space-3);
  border-radius: var(--th-radius-lg);
  background: var(--th-emerald-50);
  border: 1px solid var(--th-emerald-200);
  color: var(--th-emerald-800);
  font-weight: 700;
  font-size: var(--th-text-sm);
}

.th-static__code-chip svg {
  flex-shrink: 0;
}


/* == HORIZONTAL TIMELINE ================================================ */

.th-static__timeline {
  display: flex;
  gap: var(--th-space-1);
  counter-reset: phase;
}

.th-static__timeline-phase {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--th-space-2-5);
  padding: var(--th-space-3-5) var(--th-space-3);
  border-radius: var(--th-radius-xl);
  border: var(--th-border-default);
  background: var(--th-color-bg);
  transition: all var(--th-transition-fast);
}

.th-static__timeline-phase--active {
  background: var(--th-emerald-50);
  border-color: var(--th-emerald-200);
}

.th-static__timeline-phase--pending {
  background: var(--th-color-bg-page);
  border-color: var(--th-color-border-light);
}

.th-static__timeline-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.th-static__timeline-phase--active .th-static__timeline-icon { color: var(--th-emerald-600); }
.th-static__timeline-phase--pending .th-static__timeline-icon { color: var(--th-neutral-400); }

.th-static__timeline-label {
  font-size: var(--th-text-sm);
  font-weight: 700;
  color: var(--th-color-text);
}

.th-static__timeline-sub {
  font-size: var(--th-text-xs-plus);
  color: var(--th-color-text-muted);
  margin-top: var(--th-space-0-5);
}

.th-static__timeline-phase--active .th-static__timeline-label { color: var(--th-emerald-900); }
.th-static__timeline-phase--pending .th-static__timeline-label { color: var(--th-neutral-500); }


/* == CHECKLIST ========================================================== */

.th-static__checklist {
  display: flex;
  flex-direction: column;
  gap: var(--th-space-2);
}

.th-static__check-item {
  display: flex;
  align-items: center;
  gap: var(--th-space-3);
  padding: var(--th-space-3) var(--th-space-4);
  border-radius: var(--th-radius-xl);
  border: var(--th-border-default);
  background: var(--th-color-bg);
  font-size: var(--th-text-base);
  color: var(--th-color-text-secondary);
  transition: all var(--th-transition-fast);
}

.th-static__check-item:hover {
  border-color: var(--th-emerald-200);
  background: var(--th-emerald-50);
}

.th-static__check-icon {
  min-width: 24px;
  height: 24px;
  border-radius: var(--th-radius-full);
  background: var(--th-emerald-100);
  color: var(--th-emerald-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* == CARD =============================================================== */

.th-static__card {
  background: var(--th-color-bg);
  border: var(--th-border-default);
  border-radius: var(--th-radius-2xl);
  padding: var(--th-space-6);
}

.th-static__card--elevated {
  box-shadow: var(--th-shadow-md);
}

.th-static__card p {
  margin: 0 0 var(--th-space-3);
  font-size: var(--th-text-base);
  line-height: 1.8;
  color: var(--th-color-text-secondary);
}

.th-static__card p:last-child {
  margin-bottom: 0;
}


/* == ALERT ============================================================== */

.th-static__alert {
  display: flex;
  align-items: flex-start;
  gap: var(--th-space-3);
  padding: var(--th-space-4);
  border-radius: var(--th-radius-xl);
  font-size: var(--th-text-sm);
  line-height: var(--th-leading-relaxed);
}

.th-static__alert--warning {
  background: var(--th-amber-50);
  border: 1px solid var(--th-amber-200);
  color: var(--th-amber-900);
}

.th-static__alert--info {
  background: var(--th-blue-50);
  border: 1px solid var(--th-blue-200);
  color: var(--th-blue-900);
}

.th-static__alert--success {
  background: var(--th-emerald-50);
  border: 1px solid var(--th-emerald-200);
  color: var(--th-emerald-900);
}

.th-static__alert--danger {
  background: var(--th-red-50);
  border: 1px solid var(--th-red-200);
  color: var(--th-red-900);
}


/* == EXCEPTIONS ========================================================= */

.th-static__exceptions {
  display: flex;
  flex-direction: column;
  gap: var(--th-space-2);
  margin-top: var(--th-space-4);
}

.th-static__exception {
  display: flex;
  align-items: flex-start;
  gap: var(--th-space-2-5);
  padding: var(--th-space-3) var(--th-space-4);
  border-radius: var(--th-radius-xl);
  background: var(--th-amber-50);
  border: 1px solid var(--th-amber-100);
  color: var(--th-amber-900);
  font-size: var(--th-text-sm);
  line-height: var(--th-leading-relaxed);
}

.th-static__exception--info {
  background: var(--th-blue-50);
  border-color: var(--th-blue-100);
  color: var(--th-blue-900);
}

.th-static__exception-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.th-static__exception--info .th-static__exception-icon {
  color: var(--th-blue-500);
}


/* == FAQ ACCORDION ====================================================== */

.th-static__faq {
  display: flex;
  flex-direction: column;
  gap: var(--th-space-2);
}

.th-static__faq-item {
  border: var(--th-border-default);
  border-radius: var(--th-radius-xl);
  background: var(--th-color-bg);
  overflow: hidden;
  transition: border-color var(--th-transition-fast);
}

.th-static__faq-item:hover {
  border-color: var(--th-color-border-hover);
}

.th-static__faq-item.is-open {
  border-color: var(--th-ink-200);
}

.th-static__faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--th-space-4) var(--th-space-5);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--th-font-primary);
  font-size: var(--th-text-base);
  font-weight: 700;
  color: var(--th-color-text);
  text-align: left;
  gap: var(--th-space-3);
}

.th-static__faq-q:hover {
  background: var(--th-color-bg-hover);
}

.th-static__faq-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--th-neutral-400);
  transition: transform var(--th-transition-normal);
}

.th-static__faq-item.is-open .th-static__faq-chevron {
  transform: rotate(180deg);
  color: var(--th-color-text);
}

.th-static__faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--th-transition-slow);
}

.th-static__faq-item.is-open .th-static__faq-a {
  max-height: 500px;
}

.th-static__faq-a-inner {
  padding: 0 var(--th-space-5) var(--th-space-5);
  font-size: var(--th-text-base);
  line-height: 1.8;
  color: var(--th-color-text-secondary);
}

.th-static__faq-a-inner b {
  color: var(--th-color-text);
  font-weight: 700;
}


/* == GRID =============================================================== */

.th-static__grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--th-space-4);
}

.th-static__grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--th-space-4);
}


/* == CONTACT ROW ======================================================== */

.th-static__contact-row {
  display: flex;
  align-items: center;
  gap: var(--th-space-3);
  padding: var(--th-space-3) 0;
  border-bottom: 1px solid var(--th-color-border-light);
  font-size: var(--th-text-base);
  color: var(--th-color-text-secondary);
}

.th-static__contact-row:last-child {
  border-bottom: none;
}

.th-static__contact-row svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--th-neutral-400);
}

.th-static__contact-row span:first-of-type {
  min-width: 80px;
}

.th-static__contact-title {
  font-size: var(--th-text-md);
  font-weight: 800;
  color: var(--th-color-text);
  margin-bottom: var(--th-space-3);
}


/* == WHATSAPP BUTTON ==================================================== */

.th-static__wa-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-2);
  padding: var(--th-space-3) var(--th-space-5);
  border-radius: var(--th-radius-xl);
  background: var(--th-color-whatsapp);
  color: var(--th-neutral-0);
  font-family: var(--th-font-primary);
  font-size: var(--th-text-base);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--th-shadow-success);
  transition: all var(--th-transition-fast);
  margin-top: var(--th-space-4);
}

.th-static__wa-btn:hover {
  filter: brightness(1.08);
  box-shadow: var(--th-shadow-md);
}

.th-static__wa-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}


/* == LEGAL ============================================================== */

.th-static__legal {
  margin-top: var(--th-space-8);
  padding: var(--th-space-4);
  border-radius: var(--th-radius-xl);
  background: var(--th-color-bg-page);
  border: 1px solid var(--th-color-border-light);
  font-size: var(--th-text-xs-plus);
  line-height: 1.7;
  color: var(--th-neutral-500);
}


/* == TABLE ============================================================== */

.th-static__table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--th-radius-xl);
  overflow: hidden;
  border: var(--th-border-default);
  font-size: var(--th-text-sm);
}

.th-static__table thead {
  background: var(--th-ink-900);
  color: var(--th-neutral-0);
}

.th-static__table th {
  padding: var(--th-space-3) var(--th-space-4);
  font-weight: 700;
  text-align: left;
  font-size: var(--th-text-sm);
}

.th-static__table td {
  padding: var(--th-space-3) var(--th-space-4);
  border-bottom: 1px solid var(--th-color-border-light);
  color: var(--th-color-text-secondary);
}

.th-static__table tbody tr:nth-child(even) {
  background: var(--th-color-bg-page);
}

.th-static__table tbody tr:hover {
  background: var(--th-color-bg-hover);
}


/* == CLAUSE (Contract) ================================================== */

.th-static__clause {
  display: flex;
  gap: var(--th-space-3);
  padding: var(--th-space-4);
  border-radius: var(--th-radius-xl);
  border: var(--th-border-default);
  background: var(--th-color-bg);
  margin-bottom: var(--th-space-3);
}

.th-static__clause-num {
  min-width: 32px;
  height: 32px;
  border-radius: var(--th-radius-full);
  background: var(--th-ink-900);
  color: var(--th-neutral-0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--th-text-sm);
  flex-shrink: 0;
}

.th-static__clause-text {
  font-size: var(--th-text-base);
  line-height: 1.8;
  color: var(--th-color-text-secondary);
}


/* == CTA BANNER ========================================================= */

.th-static__cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--th-space-4);
  padding: var(--th-space-6);
  border-radius: var(--th-radius-2xl);
  background: var(--th-ink-900);
  color: var(--th-neutral-0);
  margin-top: var(--th-space-6);
  flex-wrap: wrap;
}

.th-static__cta-banner h3 {
  margin: 0;
  font-size: var(--th-text-xl);
  font-weight: 800;
}

.th-static__cta-banner p {
  margin: var(--th-space-1) 0 0;
  font-size: var(--th-text-base);
  color: var(--th-neutral-300);
}

.th-static__cta-banner a {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-2);
  padding: var(--th-space-3) var(--th-space-6);
  border-radius: var(--th-radius-xl);
  background: var(--th-orange-500);
  color: var(--th-neutral-0);
  font-weight: 700;
  font-size: var(--th-text-base);
  text-decoration: none;
  transition: all var(--th-transition-fast);
}

.th-static__cta-banner a:hover {
  background: var(--th-orange-600);
}


/* == SUPPORT GRID ======================================================= */

.th-static__support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--th-space-4);
}

.th-static__support-card {
  border-radius: var(--th-radius-2xl);
  padding: var(--th-space-5);
  background: var(--th-color-bg);
  border: var(--th-border-default);
}

.th-static__support-card--wa {
  background: var(--th-emerald-50);
  border-color: var(--th-emerald-100);
}

.th-static__support-card p {
  margin: 0 0 var(--th-space-3);
  font-size: var(--th-text-base);
  line-height: 1.7;
  color: var(--th-color-text-secondary);
}


/* == RESPONSIVE ========================================================= */

@media (max-width: 768px) {
  .th-static {
    padding: var(--th-space-4) var(--th-space-3);
  }

  .th-static__hero {
    flex-direction: column;
    padding: var(--th-space-5);
    gap: var(--th-space-5);
  }

  .th-static__hero-visual {
    flex: none;
    width: 100%;
  }

  .th-static__hero-visual img {
    max-width: 260px;
  }

  .th-static__title {
    font-size: var(--th-text-2xl);
  }

  .th-static__info-strip {
    grid-template-columns: 1fr;
  }

  .th-static__timeline {
    flex-direction: column;
  }

  .th-static__grid-2,
  .th-static__grid-3 {
    grid-template-columns: 1fr;
  }

  .th-static__support-grid {
    grid-template-columns: 1fr;
  }

  .th-static__cta-banner {
    flex-direction: column;
    text-align: center;
    padding: var(--th-space-5);
  }

  .th-static__table {
    display: block;
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .th-static__title {
    font-size: var(--th-text-xl);
  }

  .th-static__hero {
    padding: var(--th-space-4);
  }

  .th-static__highlights {
    flex-direction: column;
  }

  .th-static__faq-q {
    padding: var(--th-space-3) var(--th-space-4);
    font-size: var(--th-text-sm);
  }

  .th-static__faq-a-inner {
    padding: 0 var(--th-space-4) var(--th-space-4);
  }

  .th-static__step {
    padding: var(--th-space-4) 0;
  }
}