/* =====================================================
   Page-level extensions for theContt futurist system
   ===================================================== */

/* Page hero (interior pages) */
.page-hero{ padding-block: 80px clamp(56px, 8vw, 96px); position:relative }
.page-hero .container{ max-width: 980px; text-align:center }
.page-hero h1{
  font-family:'Sora'; font-weight:800; letter-spacing:-0.04em; line-height:1.02;
  font-size: clamp(40px, 5.6vw, 78px); margin: 18px 0 22px;
  background: linear-gradient(180deg, #FFFFFF 0%, #B7BAD9 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-hero h1 em{
  font-style:normal;
  background: linear-gradient(90deg, var(--coral), var(--purple), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-hero p.lead{ font-size: clamp(16px, 1.4vw, 19px); color: var(--text-2); max-width: 640px; margin: 0 auto }

.breadcrumb{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace; font-size: 12px; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--text-3); padding: 6px 14px;
  border:1px solid var(--line); border-radius:999px; background: var(--glass);
}
.breadcrumb a{ color: var(--text-2) }
.breadcrumb a:hover{ color: var(--coral) }
.breadcrumb .sep{ color: var(--text-3); opacity:0.5 }
.breadcrumb [aria-current]{ color: var(--coral) }

/* ===== SERVICE CARDS ===== */
.svc-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px }
@media (max-width:900px){ .svc-grid{ grid-template-columns:1fr } }
.svc{
  position:relative; padding: 32px;
  border:1px solid var(--line-2); border-radius: var(--r-xl);
  background: linear-gradient(170deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  overflow:hidden; transition: transform .3s, border-color .3s;
}
.svc::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(420px 280px at var(--gx,30%) var(--gy,20%), rgba(232,54,93,0.18), transparent 65%);
  opacity:0; transition: opacity .4s;
  pointer-events:none;
}
.svc:hover{ transform: translateY(-4px); border-color: rgba(232,54,93,0.4) }
.svc:hover::before{ opacity:1 }
.svc-head{ display:flex; gap:18px; margin-bottom: 22px; align-items:flex-start }
.svc-glyph{
  flex: 0 0 56px; width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(232,54,93,0.18), rgba(124,58,237,0.18));
  border:1px solid rgba(232,54,93,0.28); color: var(--coral);
}
.svc:nth-child(2n) .svc-glyph{
  background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(77,227,242,0.18));
  border-color: rgba(124,58,237,0.3); color: #C4A4FF;
}
.svc h3{ font-size: 22px; margin-bottom: 4px; color: var(--text) }
.svc-head p{ color: var(--text-2); font-size: 14.5px }
.svc ul{ display:grid; gap: 10px; padding: 18px 0; border-block: 1px solid var(--line); margin-bottom: 22px }
.svc li{ display:flex; gap:10px; font-size:14.5px; color: var(--text-2); align-items: baseline }
.svc li::before{
  content:''; width:8px; height:8px; border-radius:2px; flex-shrink:0; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--coral), var(--purple));
  margin-top: 6px; box-shadow: 0 0 8px rgba(232,54,93,0.5);
}
.svc .cta{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:14px; color: var(--coral);
  padding: 10px 14px; border-radius:999px;
  border:1px solid rgba(232,54,93,0.4);
  transition: background .2s, color .2s;
}
.svc:hover .cta{ background: var(--coral); color:#fff }

/* ===== COMPARE TABLE ===== */
.compare{
  border:1px solid var(--line-2); border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(10px);
}
.compare table{ width:100%; border-collapse:collapse }
.compare th, .compare td{
  padding: 18px 22px; text-align:left; font-size: 15px;
  border-bottom: 1px solid var(--line);
}
.compare thead th{
  font-family:'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); background: rgba(255,255,255,0.02);
}
.compare th.us{ color: var(--coral); background: rgba(232,54,93,0.06) }
.compare td.us{ background: rgba(232,54,93,0.04); color: var(--text); font-weight: 500 }
.compare td.them{ color: var(--text-2) }
.compare .yes{ color: var(--mint); font-weight:700 }
.compare .no{ color: var(--coral); opacity:0.7 }
.compare tr:last-child td, .compare tr:last-child th{ border-bottom: none }

/* ===== FAQ ===== */
.faq{ display:grid; gap: 12px; max-width: 820px; margin: 0 auto }
.faq-item{
  border:1px solid var(--line-2); border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  overflow:hidden; transition: border-color .25s;
}
.faq-item[open]{ border-color: rgba(232,54,93,0.4) }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 18px 22px; cursor:pointer; list-style:none;
  font-family:'Sora'; font-weight:600; font-size: 16px; color: var(--text);
}
.faq-q::-webkit-details-marker{ display:none }
.faq-q .icon{
  width: 28px; height: 28px; border-radius:50%;
  border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace; transition: transform .25s, background .25s;
}
.faq-item[open] .faq-q .icon{ transform: rotate(45deg); background: var(--coral); border-color: var(--coral); color:#fff }
.faq-a{ padding: 0 22px 22px; color: var(--text-2); font-size: 15px; line-height:1.65 }

/* ===== PERSONAS ===== */
.personas{ display:grid; gap: 28px }
.persona{
  display:grid; grid-template-columns: 1.05fr 1fr; gap: 28px;
  padding: 36px;
  border:1px solid var(--line-2); border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  position: relative; overflow:hidden;
}
.persona::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(232,54,93,0.35), transparent 40%, transparent 60%, rgba(124,58,237,0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}
.persona:nth-child(2n)::before{
  background: linear-gradient(135deg, rgba(77,227,242,0.35), transparent 40%, transparent 60%, rgba(124,58,237,0.35));
}
.persona:nth-child(2n){ grid-template-columns: 1fr 1.05fr }
.persona:nth-child(2n) .persona-content{ order:2 }
@media (max-width:900px){ .persona, .persona:nth-child(2n){ grid-template-columns: 1fr } .persona:nth-child(2n) .persona-content{ order:0 } }
.persona-label{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--coral); margin-bottom: 14px;
}
.persona-label::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--coral); box-shadow:0 0 8px var(--coral-glow) }
.persona h2{ font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 14px; line-height:1.2 }
.persona p.intro{ color: var(--text-2); font-size: 15.5px; margin-bottom: 22px }
.persona-dores{
  margin: 18px 0 22px;
  padding: 18px 20px; border-radius: 14px;
  background: rgba(232,54,93,0.06);
  border:1px solid rgba(232,54,93,0.18);
}
.persona-dores h4{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--coral); margin-bottom: 10px; font-weight:600;
}
.persona-dores ul{ display:grid; gap: 8px }
.persona-dores li{ display:flex; gap:10px; font-size:14.5px; color: var(--text-2) }
.persona-dores li::before{ content:'✗'; color: var(--coral); font-weight:700; flex-shrink:0 }
.persona-visual{
  padding: 26px;
  border:1px solid var(--line-2); border-radius: var(--r-lg);
  background: rgba(0,0,0,0.3);
}
.persona-visual h3{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--mint); margin-bottom: 18px; font-weight:600;
  display:flex; align-items:center; gap:10px;
}
.persona-visual h3::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 8px var(--mint) }
.persona-visual ul{ display:grid; gap: 12px }
.persona-visual li{
  display:flex; gap:12px; font-size:14.5px; color: var(--text);
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  transition: transform .2s, border-color .2s;
}
.persona-visual li:hover{ transform: translateX(4px); border-color: rgba(108,242,197,0.4) }
.persona-visual li::before{
  content:'✓'; color: var(--mint); font-weight:700; flex-shrink:0;
}

/* ===== STATS BIG ===== */
.bigstats{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px }
@media (max-width:900px){ .bigstats{ grid-template-columns: repeat(2,1fr) } }
@media (max-width:520px){ .bigstats{ grid-template-columns: 1fr } }
.bigstat{
  position:relative; padding: 32px 28px;
  border:1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  overflow:hidden;
}
.bigstat::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--coral), transparent);
}
.bigstat .num{
  font-family:'Sora'; font-weight:800; font-size: clamp(38px, 4.4vw, 56px); letter-spacing:-0.04em; line-height:1;
  background: linear-gradient(180deg, #fff, #B7BAD9);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom: 12px;
}
.bigstat:nth-child(odd) .num{
  background: linear-gradient(90deg, var(--coral), #FF8AA8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bigstat .lbl{ font-size: 14px; color: var(--text-2) }

/* ===== CALC INDEX CARDS ===== */
.calcidx-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px }
@media (max-width:900px){ .calcidx-grid{ grid-template-columns:1fr } }
.calcidx{
  position:relative; padding: 36px 30px;
  border:1px solid var(--line-2); border-radius: var(--r-xl);
  background: linear-gradient(170deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  overflow:hidden; transition: transform .3s, border-color .3s;
  display:flex; flex-direction:column;
}
.calcidx::after{
  content:''; position:absolute; top:-30%; right:-20%; width:240px; height:240px; border-radius:50%;
  background: radial-gradient(circle, rgba(232,54,93,0.25), transparent 70%);
  pointer-events:none; transition: transform .6s;
}
.calcidx:nth-child(2)::after{ background: radial-gradient(circle, rgba(124,58,237,0.25), transparent 70%) }
.calcidx:nth-child(3)::after{ background: radial-gradient(circle, rgba(77,227,242,0.22), transparent 70%) }
.calcidx:hover{ transform: translateY(-6px); border-color: rgba(232,54,93,0.4) }
.calcidx:hover::after{ transform: scale(1.25) }
.calcidx-glyph{
  width: 64px; height: 64px; border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--coral), var(--purple));
  color:#fff; margin-bottom: 22px; position:relative; z-index:1;
}
.calcidx:nth-child(2) .calcidx-glyph{ background: linear-gradient(135deg, var(--purple), var(--cyan)) }
.calcidx:nth-child(3) .calcidx-glyph{ background: linear-gradient(135deg, var(--cyan), var(--mint)) }
.calcidx h2{ font-size: 24px; margin-bottom: 12px; line-height:1.2; position:relative; z-index:1 }
.calcidx p{ color: var(--text-2); font-size: 15px; margin-bottom: 18px; flex:1; position:relative; z-index:1 }
.calcidx .badge{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  padding: 8px 12px; border-radius: 999px; margin-bottom: 22px;
  background: rgba(77,227,242,0.10); color: var(--cyan);
  border:1px solid rgba(77,227,242,0.25);
  align-self: flex-start; position:relative; z-index:1;
}
.calcidx .badge.success{ background: rgba(108,242,197,0.10); color: var(--mint); border-color: rgba(108,242,197,0.3) }
.calcidx .go{
  align-self:flex-start; padding: 12px 18px; font-weight:600; font-size:14px;
  background: var(--coral); color:#fff; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px; position:relative; z-index:1;
  box-shadow: 0 8px 24px -8px rgba(232,54,93,0.5);
  transition: transform .2s;
}
.calcidx:hover .go{ transform: translateX(4px) }

/* ===== TABLES (referência) ===== */
.tref{ border:1px solid var(--line-2); border-radius: var(--r-lg); overflow:hidden; background: rgba(0,0,0,0.25) }
.tref h3{
  padding: 18px 22px; margin:0; font-family:'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing:0.16em; text-transform:uppercase; color: var(--text-3); font-weight:600;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.tref table{ width:100%; border-collapse:collapse }
.tref th, .tref td{ padding: 14px 22px; font-size:14px; text-align:left; border-bottom:1px solid var(--line); color: var(--text-2) }
.tref thead th{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color: var(--text-3) }
.tref tbody td:first-child{ color: var(--text) }
.tref tbody td:last-child{ color: var(--coral); font-family:'JetBrains Mono', monospace; font-weight:600 }
.tref tr:last-child td{ border-bottom:none }
.tref-foot{ padding: 12px 22px; font-size: 12px; color: var(--text-3); background: rgba(255,255,255,0.02); border-top:1px solid var(--line); font-family:'JetBrains Mono', monospace }

/* Scrollable table wrapper */
.table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: inherit }
.table-scroll table{ min-width: 520px }

/* Force inline grids to collapse on mobile (used by some pages) */
@media (max-width: 900px){
  .cols-2[style*="grid-template-columns"]{ grid-template-columns: 1fr !important }
  .calcidx-grid[style*="grid-template-columns"]{ grid-template-columns: repeat(2, 1fr) !important }
}
@media (max-width: 640px){
  .svc-grid[style*="grid-template-columns"]{ grid-template-columns: 1fr !important }
  .calcidx-grid[style*="grid-template-columns"]{ grid-template-columns: 1fr !important }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns: 1fr !important }
}

/* Mobile paddings */
@media (max-width: 640px){
  .svc{ padding: 24px }
  .persona{ padding: 22px; gap: 18px }
  .persona-visual{ padding: 18px }
  .persona-dores{ padding: 14px 16px }
  .calc-tool{ padding: 22px }
  .calcidx{ padding: 28px 22px }
  .bigstat{ padding: 24px 20px }
  .compare th, .compare td{ padding: 14px 16px; font-size: 14px }
  .tref th, .tref td{ padding: 12px 16px; font-size: 13.5px }
  .faq-q{ padding: 16px 18px; font-size: 15px }
  .faq-a{ padding: 0 18px 18px; font-size: 14.5px }
  .page-hero{ padding-block: 56px 32px }
}

/* 2-col grid utility */
.cols-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items:start }
@media (max-width: 900px){ .cols-2{ grid-template-columns: 1fr } }