/* =========================================
   ARKAN MASTER SECTIONS CSS
   Mármore (Azul-Noite) e Ouro
========================================= */

.arkan-content-flow {
  background-color: #020512;
  color: #ffffff;
  font-family: 'Inter', sans-serif; /* Fallback if not loaded */
  overflow: hidden; /* Prevent 3D spillover */
}

.arkan-section {
  padding: 100px 5%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 10;
}

.arkan-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: #ffffff;
}

.arkan-title span.gold {
  color: #d4af37;
}

.arkan-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  line-height: 1.6;
  margin-bottom: 50px;
}

/* -----------------------------------------
   SESSÃO 4: A Proposta Arkan (3D Mouse)
----------------------------------------- */
.s4-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.s4-text {
  flex: 1;
}

.s4-3d-wrapper {
  flex: 1;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.s4-3d-object {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle at 30% 30%, #1a2442, #020512);
  border: 2px solid #d4af37;
  border-radius: 30px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 40px rgba(212, 175, 55, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.1s ease-out; /* Smooth follow */
  transform-style: preserve-3d;
}

.s4-3d-object::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  border: 4px solid #d4af37;
  border-radius: 50%;
  transform: translateZ(50px); /* Pops out in 3D */
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.s4-3d-object::after {
  content: 'ARKAN';
  position: absolute;
  color: #ffffff;
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 4px;
  transform: translateZ(80px); /* Pops out further */
}


/* -----------------------------------------
   SESSÃO 5: O Mecanismo (SVG Draw)
----------------------------------------- */
.s5-container {
  position: relative;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.s5-step {
  position: absolute;
  background: #060d24;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 12px;
  width: 250px;
  text-align: center;
  z-index: 2;
}

.s5-step h4 { margin: 0 0 10px 0; color: #d4af37; font-size: 1.2rem; }
.s5-step p { margin: 0; font-size: 0.9rem; color: #aaa; }

.s5-step.step-1 { top: 10%; left: 10%; }
.s5-step.step-2 { top: 10%; right: 10%; }
.s5-step.step-3 { bottom: 10%; left: 50%; transform: translateX(-50%); }

.s5-center-logo {
  width: 120px;
  height: 120px;
  background: #d4af37;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #020512;
  font-weight: bold;
  font-size: 20px;
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.6);
  z-index: 2;
}

.s5-svg-container {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
}

.s5-line {
  fill: none;
  stroke: #d4af37;
  stroke-width: 3;
  stroke-linecap: round;
  /* Controlled by JS */
}

/* -----------------------------------------
   SESSÃO 6: Grid de 6 Benefícios (Glow Magnético)
----------------------------------------- */
.s6-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.arkan-card {
  background: #040a18;
  border: 1px solid transparent;
  padding: 40px;
  border-radius: 16px;
  transition: all 0.4s ease;
  cursor: pointer;
}

.arkan-card h4 { color: #ffffff; margin-bottom: 15px; font-size: 1.4rem; }
.arkan-card p { color: #888; line-height: 1.5; font-size: 1rem; }

.arkan-card:hover {
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.15), inset 0 0 20px rgba(212, 175, 55, 0.05);
  transform: translateY(-5px);
}
.arkan-card:hover h4 { color: #d4af37; }


/* -----------------------------------------
   SESSÃO 9: Tabela Comparativa (Holofote)
----------------------------------------- */
.s9-table-container {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  background: #040a18;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.s9-row {
  display: contents;
}

.s9-cell {
  padding: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
}

.s9-row.header .s9-cell {
  font-weight: bold;
  font-size: 1.2rem;
  background: #060d24;
  border-bottom: 2px solid rgba(255,255,255,0.1);
}

.s9-cell.feature-col { font-weight: 500; color: #fff; }

.s9-cell.opaque-col {
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  justify-content: center;
}

.s9-cell.highlight-col {
  color: #ffffff;
  text-align: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0) 100%);
  border-left: 1px solid rgba(212, 175, 55, 0.2);
  border-right: 1px solid rgba(212, 175, 55, 0.2);
  position: relative;
}

.s9-row.header .s9-cell.highlight-col {
  color: #d4af37;
  border-top: 2px solid #d4af37;
  background: rgba(212, 175, 55, 0.1);
}