:root {
  --clean-bg: #f9fafb;
  --clean-surface: #ffffff;
  --clean-ink: #111827;
  --clean-muted: #667085;
  --clean-line: #e5e7eb;
  --clean-soft: #f3f4f6;
  --clean-teal: #0d9488;
  --clean-teal-dark: #0f766e;
  --clean-amber: #f59e0b;
  --clean-radius: 12px;
  --clean-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

html {
  background: var(--clean-bg);
}

body {
  background: var(--clean-bg) !important;
  color: var(--clean-ink) !important;
}

body::before,
.promo-bar,
.hero::before,
.hero-media,
.metric-row,
.tool::before {
  display: none !important;
}

.shell {
  width: min(1120px, calc(100% - 32px)) !important;
}

.topbar {
  top: 0 !important;
  border-bottom: 1px solid var(--clean-line) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) !important;
}

.nav {
  min-height: 64px !important;
}

.brand,
.navlinks,
.navlinks a,
.language-links a {
  color: var(--clean-ink) !important;
}

.brand-mark {
  border: 1px solid var(--clean-line) !important;
  background: linear-gradient(135deg, #0d9488 0 40%, #f59e0b 40% 70%, #ef4444 70% 100%) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.navlinks {
  gap: 10px !important;
}

.navlinks > a,
.language-links a {
  min-height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--clean-muted) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.language-links a[aria-current="page"],
.language-links a:hover,
.navlinks > a:hover {
  border-color: var(--clean-line) !important;
  background: var(--clean-soft) !important;
  color: var(--clean-ink) !important;
}

.hero {
  min-height: auto !important;
  padding: 34px 0 34px !important;
  overflow: visible !important;
}

.hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
}

.intro {
  position: static !important;
  min-height: 0 !important;
  max-width: 720px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

.kicker {
  width: fit-content !important;
  margin: 0 0 12px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(13, 148, 136, 0.22) !important;
  border-radius: 999px !important;
  background: #ecfdf5 !important;
  color: var(--clean-teal-dark) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

h1 {
  max-width: 720px !important;
  color: var(--clean-ink) !important;
  text-align: left !important;
  font-size: clamp(40px, 6vw, 72px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

h1 .latin-title,
h1 .local-title {
  display: block !important;
}

h1 .local-title {
  margin-top: 6px !important;
  color: var(--clean-muted) !important;
  font-size: 0.46em !important;
  line-height: 1.12 !important;
}

.intro-text {
  max-width: 680px !important;
  margin-top: 14px !important;
  color: var(--clean-muted) !important;
  font-size: clamp(16px, 1.6vw, 20px) !important;
  line-height: 1.65 !important;
}

.tool {
  width: 100% !important;
  margin: 6px auto 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--clean-line) !important;
  border-radius: 16px !important;
  background: var(--clean-surface) !important;
  box-shadow: var(--clean-shadow) !important;
}

.toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 10px !important;
  padding: 14px !important;
  border-bottom: 1px solid var(--clean-line) !important;
  background: #ffffff !important;
}

.file-label,
.ghost-button,
.small-button {
  min-height: 42px !important;
  border-radius: 10px !important;
  font-weight: 900 !important;
}

.file-label {
  position: relative !important;
  justify-content: center !important;
  border: 1px solid var(--clean-teal) !important;
  background: var(--clean-teal) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.file-label input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  appearance: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ghost-button,
.small-button {
  border: 1px solid var(--clean-line) !important;
  background: #ffffff !important;
  color: var(--clean-ink) !important;
}

.file-label:hover,
.ghost-button:hover,
.small-button:hover,
.copy-mini:hover,
.palette-item button:hover {
  transform: translateY(-1px);
}

.dropzone {
  grid-template-columns: minmax(0, 1fr) 330px !important;
  min-height: 520px !important;
  background: #ffffff !important;
}

.canvas-area {
  background: #ffffff !important;
}

.image-stage {
  min-height: 430px !important;
  border: 1px solid var(--clean-line) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(45deg, #eef2f7 25%, transparent 25% 75%, #eef2f7 75%),
    linear-gradient(45deg, #eef2f7 25%, #f8fafc 25% 75%, #eef2f7 75%) !important;
  background-position: 0 0, 12px 12px !important;
  background-size: 24px 24px !important;
}

.side {
  gap: 14px !important;
  border-left: 1px solid var(--clean-line) !important;
  background: #fbfcfd !important;
}

.current-swatch,
#zoomCanvas,
.code-row,
.palette-item,
.feature-card,
.possibility-card,
.step-card,
.proof-card,
.pricing-card,
.faq-item,
.inspiration-card {
  border-color: var(--clean-line) !important;
  background: #ffffff !important;
  color: var(--clean-ink) !important;
  box-shadow: none !important;
}

.label-line,
.code-row span,
.range-control,
.status {
  color: var(--clean-muted) !important;
}

.code-row code {
  min-width: 0 !important;
  color: var(--clean-ink) !important;
  font-size: 12px !important;
}

.copy-mini {
  border-color: var(--clean-line) !important;
  background: var(--clean-soft) !important;
  color: var(--clean-ink) !important;
}

.palette-wrap {
  border-top: 1px solid var(--clean-line) !important;
  background: #ffffff !important;
}

.palette-head h2,
.tool-heading {
  color: var(--clean-ink) !important;
}

.tool-heading {
  margin: 0 !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

.palette {
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
}

.palette-item {
  border-radius: 10px !important;
}

.palette-color {
  min-height: 54px !important;
}

.structure-section {
  margin-top: 46px !important;
  scroll-margin-top: 90px !important;
}

#tool,
#palette,
.final-cta {
  scroll-margin-top: 90px !important;
}

.section-copy {
  max-width: 720px !important;
  margin-bottom: 18px !important;
}

.section-copy.centered {
  max-width: 720px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}

.section-copy h2,
.final-cta h2 {
  margin: 0 0 10px !important;
  color: var(--clean-ink) !important;
  font-size: clamp(26px, 4vw, 40px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.section-copy p,
.inspiration-card p,
.feature-card p,
.possibility-card p,
.step-card p,
.proof-card p,
.pricing-card p,
.faq-item p,
.final-cta p,
.footer p {
  color: var(--clean-muted) !important;
}

.inspiration-grid,
.result-gallery,
.feature-grid,
.possibility-grid,
.steps-grid,
.pricing-grid,
.faq-list {
  display: grid !important;
  gap: 14px !important;
}

.inspiration-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.result-gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.feature-grid,
.possibility-grid,
.steps-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.pricing-grid,
.faq-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.inspiration-card,
.feature-card,
.possibility-card,
.step-card,
.pricing-card,
.faq-item {
  min-width: 0 !important;
  border: 1px solid var(--clean-line) !important;
  border-radius: var(--clean-radius) !important;
  background: #ffffff !important;
  color: var(--clean-ink) !important;
}

.inspiration-card {
  overflow: hidden !important;
}

.inspiration-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
}

.inspiration-card div,
.feature-card,
.possibility-card,
.step-card,
.pricing-card,
.faq-item {
  padding: 16px !important;
}

.feature-card h3,
.possibility-card h3,
.step-card h3,
.pricing-card h3,
.faq-item h3,
.inspiration-card .card-title {
  margin: 0 0 8px !important;
  color: var(--clean-ink) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

.inspiration-card p,
.feature-card p,
.possibility-card p,
.step-card p,
.pricing-card p,
.faq-item p {
  margin: 0 !important;
  line-height: 1.58 !important;
}

.step-card::before {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  margin-bottom: 12px !important;
  border-radius: 999px !important;
  background: #ecfdf5 !important;
  color: var(--clean-teal-dark) !important;
  font-weight: 900 !important;
  content: attr(data-step) !important;
}

.pricing-card strong {
  display: block !important;
  margin-bottom: 8px !important;
  color: var(--clean-teal-dark) !important;
  font-size: 30px !important;
}

.final-cta {
  margin: 52px auto 20px !important;
  padding: clamp(26px, 5vw, 48px) !important;
  border: 1px solid var(--clean-line) !important;
  border-radius: 16px !important;
  background: #eefdfb !important;
  text-align: center !important;
  box-shadow: none !important;
}

.final-cta p {
  max-width: 650px !important;
  margin: 0 auto 18px !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.final-cta a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  background: var(--clean-teal) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.footer {
  color: var(--clean-muted) !important;
}

.footer a {
  color: var(--clean-muted) !important;
}

@media (max-width: 860px) {
  .hero {
    padding-top: 24px !important;
  }

  .nav {
    align-items: start !important;
  }

  .navlinks {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  h1 {
    font-size: clamp(36px, 12vw, 52px) !important;
  }

  .intro-text {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  .toolbar,
  .dropzone {
    grid-template-columns: 1fr !important;
  }

  .image-stage {
    min-height: 280px !important;
  }

  .side {
    border-left: 0 !important;
    border-top: 1px solid var(--clean-line) !important;
  }

  .palette-head {
    align-items: stretch !important;
  }

  .palette-actions {
    width: 100% !important;
  }

  .palette {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .structure-section {
    margin-top: 38px !important;
  }

  .inspiration-grid,
  .result-gallery,
  .feature-grid,
  .possibility-grid,
  .steps-grid,
  .pricing-grid,
  .faq-list {
    grid-template-columns: 1fr !important;
  }
}