/* ============================================================
   HERO — COMO FUNCIONA (centered, min-height 60vh)
   ============================================================ */
.hero{min-height:60vh;display:flex;align-items:center;padding:140px 0 60px}
.h-g{text-align:center;max-width:700px;margin:0 auto}
.h-sub{max-width:560px;margin-left:auto;margin-right:auto}
.h-ctas{justify-content:center}

/* ============================================================
   TABS
   ============================================================ */
.tabs{display:flex;justify-content:center;gap:8px;margin-bottom:36px}
.tab{padding:10px 24px;border-radius:50px;font-size:13px;font-weight:600;border:1.5px solid var(--bdr);background:transparent;color:var(--muted);transition:.25s;cursor:pointer}
.tab.active{background:var(--mint);color:var(--blue);border-color:var(--mint)}
.tab:hover:not(.active){border-color:rgba(100,228,168,.3);color:var(--white)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ============================================================
   TIMELINE
   ============================================================ */
.tl-g{display:flex;flex-direction:column;gap:0;max-width:640px;margin:0 auto;position:relative;padding-left:20px}
.tl-g::before{content:'';position:absolute;left:6px;top:24px;bottom:24px;width:2px;background:var(--bdr)}
.tl-i{position:relative;padding:18px 0 18px 24px}
.tl-dt{position:absolute;left:-20px;top:24px;width:12px;height:12px;border-radius:50%;background:var(--mint);border:2px solid var(--bg);z-index:1}
.tl-i .t{font-family:var(--m);font-size:10px;color:var(--mint);letter-spacing:.5px;margin-bottom:4px;display:flex;align-items:center;gap:5px}
.tl-i h3{font-size:16px;font-weight:600;margin-bottom:4px}
.tl-i p{font-size:13px;color:var(--muted);line-height:1.6}

/* ============================================================
   TRACKING MOCKUP
   ============================================================ */
.tk-g{display:flex;flex-direction:column;gap:0;max-width:640px;margin:0 auto;position:relative;padding-left:20px}
.tk-g::before{content:'';position:absolute;left:6px;top:20px;bottom:20px;width:2px;background:var(--bdr)}
.tk-step{display:flex;gap:14px;padding:16px 0;position:relative}
.tk-ic{width:36px;height:36px;min-width:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;position:relative;z-index:1}
.tk-ic--done{background:rgba(100,228,168,.12)}
.tk-ic--active{background:var(--grad)}
.tk-ic--wait{background:var(--bgc);opacity:.5}
.tk-step h4{font-size:14px;font-weight:600;margin-bottom:2px}
.tk-step p{font-size:12px;color:var(--muted);line-height:1.5}
.badge{display:inline-block;font-family:var(--m);font-size:9px;padding:3px 8px;border-radius:6px;margin-top:6px;letter-spacing:.3px}
.badge--done{background:rgba(100,228,168,.1);color:var(--mint)}
.badge--active{background:rgba(100,25,168,.2);color:#c4a0ff}
.badge--wait{background:rgba(255,255,255,.05);color:var(--muted)}

/* ============================================================
   TECH GRID
   ============================================================ */
.tch-g{display:grid;grid-template-columns:1fr;gap:12px}
.tch{padding:20px}
.tch .ic{font-size:22px;margin-bottom:8px}
.tch h3{font-size:14px;font-weight:600;margin-bottom:4px}
.tch p{font-size:12px;color:var(--muted);line-height:1.55}

/* ============================================================
   COMPARATOR TABLE
   ============================================================ */
.cmp{max-width:700px;margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp table{width:100%;border-collapse:collapse;font-size:13px;min-width:480px}
.cmp thead th{text-align:left;padding:12px 14px;font-size:11px;font-family:var(--m);text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:2px solid var(--bdr)}
.cmp thead th:last-child{color:var(--mint)}
.cmp tbody td{padding:12px 14px;border-bottom:1px solid var(--bdr);color:var(--muted);vertical-align:top}
.cmp tbody td:first-child{color:var(--white);font-weight:500}
.cmp tbody td.hi{color:var(--mint);font-weight:500}
.cmp tbody tr:last-child td{border-bottom:none}

/* ============================================================
   RESPONSIVE (page-specific overrides)
   ============================================================ */
@media(min-width:600px){
  .tch-g{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:960px){
  .hero{padding:140px 0 80px}
  .tch-g{grid-template-columns:repeat(3,1fr)}
}