html {
  scroll-padding-top: var(--header-height-mobile);
}

.hero-poker {
  background: radial-gradient(circle at top left, #fdf7ee, #f1e3d3);
}

.hero-poker-inner {
  align-items: center;
}

.hero-copy {
  min-width: 0;
}

.hero-poker-media {
  min-width: 0;
}

.hero-poker-media-main {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.hero-poker-tag {
  backdrop-filter: blur(14px);
}

.hero-poker-meta {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.chip-soft {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(201, 139, 95, 0.4);
}

.section-flow {
  background: linear-gradient(180deg, #f6f1e9 0%, #f3e7d9 100%);
}

.section-flow-row {
  align-items: stretch;
}

.section-flow-visual-inner {
  max-height: 480px;
}

.section-flow-content {
  min-width: 0;
}

.card-flow {
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at top left, #ffffff, #f7ebdd);
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.flow-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.flow-step-number {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #c98b5f, #8b4b2b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.flow-step-body h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.flow-step-body p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-soft);
}

.section-flow-note {
  margin-top: var(--space-md);
}

.section-details {
  background: radial-gradient(circle at top, #f9f3ea, #f0e6d8);
}

.section-details-grid {
  align-items: stretch;
}

.card-details {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
}

.card-details .card-body {
  flex: 1 1 auto;
}

.details-list {
  list-style: none !important;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.details-list li {
  margin: 0;
}

.details-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.9rem;
  border-radius: var(--radius-full);
  background-color: rgba(59, 41, 33, 0.06);
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.details-list p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-soft);
}

.section-gallery {
  background-color: #f6f1e9;
}

.gallery-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: stretch;
}

.gallery-main-card {
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  background: radial-gradient(circle at top left, #ffffff, #f3e7d9);
  box-shadow: var(--shadow-soft);
  outline: none;
}

.gallery-main-card:focus-visible {
  box-shadow: 0 0 0 2px var(--color-focus), var(--shadow-soft);
}

.gallery-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.gallery-media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  max-height: 520px;
}

.gallery-caption {
  font-size: 0.9375rem;
  color: var(--color-text-soft);
}

.gallery-aside-card {
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-subtle);
}

.gallery-tips {
  list-style: none !important;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.gallery-tips li h4 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
}

.gallery-tips li p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-soft);
}

.gallery-cta .btn {
  width: 100%;
}

.section-cta-final {
  background: linear-gradient(180deg, #f0e6d8, #e6d6c4);
}

.card-final-cta {
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at top left, #ffffff, #f5e6d5);
}

.cta-final-actions {
  min-width: 0;
}

.cta-final-actions .cluster {
  justify-content: flex-end;
}

.cta-final-actions .btn {
  white-space: normal;
}

.nav-toggle {
  flex-direction: column;
}

.btn,
.btn-secondary,
.btn-ghost {
  max-width: 100%;
}

@media (max-width: 1023.98px) {
  .gallery-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .cta-final-actions .cluster {
    justify-content: flex-start;
  }
}

@media (max-width: 767.98px) {
  .hero {
    padding-top: calc(var(--space-2xl) + 0.5rem);
  }
  .section {
    padding-block: var(--space-xl);
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    width: 100%;
  }
  .gallery-media {
    max-height: none;
  }
  .card-final-cta .flex-row {
    flex-direction: column;
  }
  .cta-final-actions .cluster {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .cta-final-actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-poker-media-main img,
  .section-flow-visual-inner img,
  .gallery-media img {
    transform: scale(1.01);
    transition: transform 0.6s ease, box-shadow 0.6s ease;
  }
  .hero-poker-media-main:hover img,
  .section-flow-visual-inner:hover img,
  .gallery-main-card:hover .gallery-media img {
    transform: scale(1.04);
    box-shadow: var(--shadow-glass);
  }
  .card,
  .card-soft,
  .btn {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  }
  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(40, 25, 15, 0.14);
  }
  .card-soft:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(40, 25, 15, 0.12);
  }
}