.section-padding {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.section-header {
  max-width: 720px;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.section-header-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
}

.section-header-inline .section-header-title {
  text-align: left;
}

@media (max-width: 768px) {
  .section-header-inline {
    flex-direction: column;
    align-items: flex-start;
  }
}

.talents-hero {
  position: relative;
}

.talents-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}

@media (max-width: 900px) {
  .talents-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.talents-hero-copy {
  max-width: 640px;
}

.talents-hero-lead {
  font-size: var(--font-size-lg);
  color: var(--color-accent-silver);
}

.talents-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.talents-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.talents-hero-visual {
  display: flex;
  justify-content: center;
}

.talents-hero-orbit {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 0%, rgba(31, 136, 255, 0.45), transparent 60%),
    radial-gradient(circle at 70% 100%, rgba(216, 36, 60, 0.55), transparent 65%),
    #050609;
  box-shadow: var(--shadow-strong);
}

.talents-hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(197, 202, 216, 0.6);
}

.talents-hero-ring--outer {
  inset: 16px;
}

.talents-hero-ring--inner {
  inset: 56px;
}

.talents-hero-core {
  position: absolute;
  inset: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(255, 106, 42, 0.7), transparent 70%),
    #050609;
  box-shadow: var(--shadow-glow-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
}

.talents-hero-core-label {
  text-align: center;
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  font-size: var(--font-size-xs);
}

.talents-hero-core-label span {
  display: block;
  font-size: var(--font-size-sm);
}

.talents-hero-node {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  background-color: rgba(10, 12, 18, 0.95);
  border: 1px solid rgba(197, 202, 216, 0.8);
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.talents-hero-node--offense {
  top: 16%;
  left: 80%;
}

.talents-hero-node--defense {
  top: 80%;
  left: 25%;
}

.talents-hero-node--utility {
  top: 24%;
  left: 20%;
}

.talents-grid-intro {
  gap: var(--space-6);
}

.talent-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-text-muted);
}

.talents-meter {
  margin-top: var(--space-4);
}

.talents-meter-label {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
  color: var(--color-accent-silver);
}

.talents-meter-caption {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
}

.talents-key {
  background: radial-gradient(circle at top, rgba(31, 136, 255, 0.12), transparent 60%),
    linear-gradient(to bottom, #050609, #090b12);
}

.talents-key-grid {
  margin-top: var(--space-4);
}

.talent-card {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.talent-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-strong);
  border-color: rgba(31, 136, 255, 0.9);
}

.build-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: var(--space-6);
}

@media (max-width: 960px) {
  .build-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.build-sidebar {
  background-color: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.build-tab {
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background-color: rgba(10, 12, 18, 0.9);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.build-tab-label {
  display: block;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  color: var(--color-accent-silver);
}

.build-tab-meta {
  font-size: var(--font-size-xs);
}

.build-tab.is-active {
  border-color: rgba(31, 136, 255, 0.9);
  background: radial-gradient(circle at 0 0, rgba(31, 136, 255, 0.35), transparent 55%);
  color: var(--color-text);
}

.build-tab:hover {
  transform: translateY(-1px);
}

.build-sidebar-cta {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.build-content {
  display: flex;
}

.build-panel {
  width: 100%;
}

.build-panel.is-hidden {
  display: none;
}

.build-distribution {
  margin-top: var(--space-4);
  gap: var(--space-5);
}

.tree-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: flex-start;
}

@media (max-width: 960px) {
  .tree-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tree-visual img {
  border-radius: var(--radius-md);
}

.tree-visual figcaption {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
}

.tree-info {
  font-size: var(--font-size-sm);
}

.talents-pvp-grid {
  gap: var(--space-6);
}

.talents-passive-active {
  margin-top: var(--space-4);
  gap: var(--space-6);
}

.hero-talents-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr);
  gap: var(--space-6);
  align-items: flex-start;
}

@media (max-width: 960px) {
  .hero-talents-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero-talents-visual img {
  border-radius: var(--radius-md);
}

.hero-talents-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero-talents-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.talents-tips-grid {
  gap: var(--space-6);
}

.faq-accordion {
  margin-top: var(--space-4);
}

.faq-item + .faq-item {
  border-top: 1px solid var(--color-border-subtle);
}

.faq-question {
  width: 100%;
  padding: var(--space-4) var(--space-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.faq-icon {
  font-size: var(--font-size-lg);
  color: var(--color-accent-orange);
}

.faq-answer {
  padding: 0 var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}

.faq-cta p {
  margin-bottom: var(--space-3);
}