.hero--split {
  min-height: auto;
  padding: 9rem 0 5rem;
}

.hero--split .hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3xl);
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero--split .hero-content {
  max-width: 100%;
}

.hero-visual {
  position: relative;
}

.hero-visual-img {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl), var(--shadow-glow);
  border: 1px solid rgba(255,255,255,0.08);
}

.hero-visual-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.hero-visual-float {
  position: absolute;
  bottom: -20px;
  left: -20px;
  background: rgba(17,24,39,0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  box-shadow: var(--shadow-lg);
}

.hero-visual-float-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(16,185,129,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-visual-float-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--gf-emerald);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-visual-float-text {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gf-white);
  line-height: 1.3;
}

.hero-visual-float-sub {
  font-size: var(--fs-xs);
  color: var(--gf-silver);
  font-weight: 400;
}

.disclaimer-bar {
  padding: var(--sp-lg) 0;
  background: var(--gf-snow);
  border-top: 1px solid var(--gf-pearl);
  border-bottom: 1px solid var(--gf-pearl);
}

.disclaimer-text {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--gf-muted);
  max-width: 700px;
  margin-inline: auto;
  line-height: 1.6;
}

.features-alt {
  padding: var(--sp-section) 0;
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4xl);
  align-items: center;
  margin-bottom: var(--sp-4xl);
}

.feature-row:last-child {
  margin-bottom: 0;
}

.feature-row--reverse {
  direction: rtl;
}

.feature-row--reverse > * {
  direction: ltr;
}

.feature-row-visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.feature-row-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 320px;
}

.feature-row-content {
  padding: var(--sp-md) 0;
}

.feature-row-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--gf-electric);
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-md);
}

.feature-row-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--gf-deep);
  margin-bottom: var(--sp-md);
  line-height: 1.15;
}

.feature-row-desc {
  font-size: var(--fs-base);
  color: var(--gf-muted);
  line-height: 1.7;
  margin-bottom: var(--sp-xl);
}

.feature-row-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.feature-row-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--gf-slate);
}

.feature-row-item svg {
  width: 16px;
  height: 16px;
  stroke: var(--gf-emerald);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.faq {
  padding: var(--sp-section) 0;
  background: var(--gf-grad-subtle);
}

.faq-header {
  text-align: center;
  margin-bottom: var(--sp-3xl);
}

.faq-header .section-subtitle {
  margin-inline: auto;
}

.faq-list {
  max-width: 760px;
  margin-inline: auto;
}

.faq-item {
  border-bottom: 1px solid var(--gf-pearl);
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: var(--sp-lg) 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--gf-deep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.faq-question:hover {
  color: var(--gf-electric);
}

.faq-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}

.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out);
}

.faq-answer-inner {
  padding: 0 0 var(--sp-lg);
  font-size: var(--fs-sm);
  color: var(--gf-muted);
  line-height: 1.7;
}

.faq-item.is-open .faq-answer {
  max-height: 500px;
}

.stats-row {
  padding: var(--sp-3xl) 0;
  background: var(--gf-grad-hero);
  position: relative;
  overflow: hidden;
}

.stats-row .hero-grid-bg {
  opacity: 0.3;
}

.stats-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-xl);
  text-align: center;
}

.stats-item {}

.stats-value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--gf-white);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.stats-label {
  font-size: var(--fs-xs);
  color: var(--gf-silver);
}

.tech-stack {
  padding: var(--sp-section) 0;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-md);
}

.tech-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-xl) var(--sp-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gf-pearl);
  background: var(--gf-white);
  transition: all var(--dur-base) var(--ease-out);
}

.tech-item:hover {
  border-color: rgba(59,130,246,0.2);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.tech-item-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--gf-grad-glow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-item-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--gf-electric);
  fill: none;
  stroke-width: 1.5;
}

.tech-item-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gf-deep);
  text-align: center;
}

.tech-item-desc {
  font-size: var(--fs-xs);
  color: var(--gf-muted);
  text-align: center;
}

.comparison {
  padding: var(--sp-section) 0;
}

.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gf-pearl);
}

.comparison-table th,
.comparison-table td {
  padding: var(--sp-md) var(--sp-lg);
  text-align: left;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--gf-pearl);
}

.comparison-table th {
  background: var(--gf-deep);
  color: var(--gf-white);
  font-weight: 600;
}

.comparison-table td {
  color: var(--gf-slate);
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table tr:nth-child(even) td {
  background: var(--gf-snow);
}

.comparison-highlight {
  background: rgba(59,130,246,0.06);
}

.check-icon {
  color: var(--gf-emerald);
  font-weight: 700;
}

.testimonial {
  padding: var(--sp-section) 0;
}

.testimonial-card {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
  padding: var(--sp-3xl) var(--sp-2xl);
  background: var(--gf-white);
  border: 1px solid var(--gf-pearl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.testimonial-quote {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-style: italic;
  color: var(--gf-deep);
  line-height: 1.4;
  margin-bottom: var(--sp-xl);
}

.testimonial-quote::before {
  content: '\201C';
  color: var(--gf-electric);
  font-size: 3rem;
  line-height: 0;
  vertical-align: -0.3em;
  margin-right: 0.1em;
}

.testimonial-author {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gf-deep);
}

.testimonial-role {
  font-size: var(--fs-xs);
  color: var(--gf-muted);
  margin-top: 0.15rem;
}

.code-preview {
  background: var(--gf-midnight);
  border-radius: var(--radius-xl);
  padding: var(--sp-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl), var(--shadow-glow);
  border: 1px solid rgba(255,255,255,0.06);
}

.code-preview-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.code-dot--red { background: #ef4444; }
.code-dot--yellow { background: #eab308; }
.code-dot--green { background: #22c55e; }

.code-preview-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--gf-muted);
  margin-left: 0.5rem;
}

.code-preview pre {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--gf-cloud);
  line-height: 1.8;
  overflow-x: auto;
  white-space: pre;
}

.code-kw { color: #c084fc; }
.code-fn { color: #60a5fa; }
.code-str { color: #34d399; }
.code-cm { color: #6b7280; }
.code-num { color: #f59e0b; }

.pipeline {
  padding: var(--sp-section) 0;
}

.pipeline-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-xl);
  min-width: 140px;
}

.pipeline-step-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gf-grad-glow);
  border: 2px solid var(--gf-electric);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-md);
}

.pipeline-step-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--gf-electric);
  fill: none;
  stroke-width: 1.5;
}

.pipeline-step-title {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--gf-deep);
  margin-bottom: 0.2rem;
}

.pipeline-step-desc {
  font-size: var(--fs-xs);
  color: var(--gf-muted);
  max-width: 120px;
}

.pipeline-arrow {
  width: 40px;
  height: 2px;
  background: var(--gf-pearl);
  position: relative;
  flex-shrink: 0;
}

.pipeline-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -4px;
  border: 5px solid transparent;
  border-left-color: var(--gf-cloud);
}

@media (max-width: 1024px) {
  .hero--split .hero-split {
    grid-template-columns: 1fr;
    gap: var(--sp-2xl);
  }

  .feature-row {
    grid-template-columns: 1fr;
    gap: var(--sp-2xl);
  }

  .feature-row--reverse {
    direction: ltr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hero--split {
    padding: 6rem 0 3rem;
  }

  .hero-visual-float {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: var(--sp-md);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-lg);
  }

  .pipeline-flow {
    flex-direction: column;
  }

  .pipeline-arrow {
    width: 2px;
    height: 30px;
  }

  .pipeline-arrow::after {
    right: -4px;
    top: auto;
    bottom: -1px;
    border: 5px solid transparent;
    border-top-color: var(--gf-cloud);
    border-left-color: transparent;
  }

  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .comparison-table {
    display: block;
    overflow-x: auto;
  }

  .feature-row-visual img {
    min-height: 240px;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tech-grid {
    grid-template-columns: 1fr 1fr;
  }
}