/*
  ccLeaf-inspired product-platform visual layer.
  Visual-only override: no text, data, asset path, or interaction logic changes.
*/

:root {
  --bg: #070a0d;
  --bg-soft: #0b0f14;
  --surface: #111720;
  --surface-2: #141b24;
  --surface-3: #1b232d;
  --text: #f4f7f8;
  --text-muted: #9ba8b2;
  --text-faint: #6f7b84;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);
  --accent: #7cffb2;
  --accent-2: #5de6a5;
  --accent-soft: rgba(124, 255, 178, .12);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-soft: 0 18px 60px rgba(0, 0, 0, .28);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, .24);
  --container-width: 1200px;
  --ui-ease: cubic-bezier(.2, .74, .28, 1);
}

html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

body {
  font-family: Inter, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

a,
button,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

.site {
  --palette-primary: var(--accent);
  --palette-secondary: var(--accent-2);
  --palette-accent: var(--accent);
  --palette-background: var(--bg);
  --palette-text: var(--text);
  min-height: 100vh;
  color: var(--text) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(124,255,178,.085), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(93,230,165,.055), transparent 25%),
    linear-gradient(180deg, #080b0f 0%, #070a0d 46%, #090d12 100%) !important;
}

.base-bg {
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(180deg, #070a0d 0%, #0a0e13 100%) !important;
  background-size: 80px 80px, 80px 80px, auto !important;
}

.media-bg {
  opacity: .12 !important;
  filter: saturate(.78) contrast(.9) brightness(.55) !important;
}

.dim-bg {
  background:
    linear-gradient(90deg, rgba(7,10,13,.88), rgba(7,10,13,.58) 48%, rgba(7,10,13,.86)),
    linear-gradient(180deg, rgba(7,10,13,.42), rgba(7,10,13,.84)) !important;
}

.energy {
  opacity: .26 !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(124,255,178,.09), transparent 30%),
    radial-gradient(circle at 76% 14%, rgba(124,255,178,.045), transparent 28%) !important;
  animation: none !important;
  mask-image: none !important;
}

.scanlines {
  opacity: .045 !important;
  mix-blend-mode: normal !important;
  background-image: repeating-linear-gradient(rgba(255,255,255,.08) 0 1px, transparent 1px 6px) !important;
}

.container {
  width: min(var(--container-width), calc(100vw - 48px)) !important;
}

.header {
  padding: 18px 0 0 !important;
}

.nav {
  width: min(var(--container-width), calc(100vw - 48px)) !important;
  min-height: 66px;
  padding: 10px 14px !important;
  gap: 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  color: var(--text) !important;
  background: rgba(13, 18, 24, .88) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

.brand {
  gap: 10px !important;
  padding: 6px 12px 6px 6px !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  color: var(--text) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.brand:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong) !important;
  background: rgba(255,255,255,.055) !important;
}

.brand img {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 12px !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}

.nav-relics {
  opacity: .68;
  filter: saturate(.78) brightness(.92);
}

.nav-links {
  gap: 4px !important;
}

.nav-links a,
.mobile-nav a,
.mobile-nav button {
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  text-shadow: none !important;
}

.nav-links a:hover,
.mobile-nav a:hover,
.mobile-nav button:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,.055) !important;
}

.nav .cta,
.hero-actions .cta,
.hero-actions .ghost,
.community-button,
.text-link,
.sponsor-main-button,
.material-download,
.material-modal-download,
.icon-modal-download,
.sound-actions button,
.sound-actions a,
.pixel-actions button,
.pixel-presets button {
  min-height: 42px;
  border-radius: 14px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition:
    transform 180ms var(--ui-ease),
    border-color 180ms var(--ui-ease),
    background-color 180ms var(--ui-ease),
    color 180ms var(--ui-ease),
    opacity 180ms var(--ui-ease) !important;
}

.nav .cta,
.hero-actions .ghost,
.pixel-actions button:not(.primary-action),
.pixel-presets button,
.sound-actions button,
.sound-actions a,
.material-download,
.material-modal-download,
.icon-modal-download {
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  background: rgba(255,255,255,.035) !important;
}

.nav .materials-nav-cta,
.nav .sponsor-nav-cta {
  border-color: var(--border-strong) !important;
  background: rgba(255,255,255,.045) !important;
}

.nav .community-nav-cta,
.hero-actions .cta,
.community-button,
.sponsor-main-button,
.pixel-actions .primary-action,
.pixel-presets button.active {
  border: 1px solid rgba(124,255,178,.58) !important;
  color: #07100c !important;
  background: var(--accent) !important;
}

.nav .community-nav-cta:hover,
.nav .cta:hover,
.hero-actions .cta:hover,
.hero-actions .ghost:hover,
.community-button:hover,
.sponsor-main-button:hover,
.pixel-actions button:hover:not(:disabled),
.pixel-presets button:hover {
  transform: translateY(-1px);
  border-color: rgba(124,255,178,.5) !important;
}

.nav .community-nav-cta:hover,
.hero-actions .cta:hover,
.community-button:hover,
.sponsor-main-button:hover,
.pixel-actions .primary-action:hover,
.pixel-presets button.active:hover {
  background: var(--accent-2) !important;
}

.nav-submenu {
  min-width: 230px !important;
  padding: 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: rgba(13, 18, 24, .96) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(18px) !important;
}

.nav-submenu::before,
.nav-submenu a::before {
  display: none !important;
}

.nav-submenu a {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: var(--text-muted) !important;
  background: transparent !important;
}

.nav-submenu a:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,.06) !important;
}

.mobile-nav {
  width: min(var(--container-width), calc(100vw - 48px)) !important;
  margin: 10px auto 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: rgba(13,18,24,.9) !important;
  box-shadow: 0 12px 42px rgba(0,0,0,.22) !important;
}

.hero {
  min-height: auto !important;
  padding: clamp(64px, 7vw, 92px) 0 clamp(54px, 6vw, 78px) !important;
}

.hero-stage {
  display: grid !important;
  grid-template-columns: minmax(390px, .9fr) minmax(460px, 1.06fr) !important;
  align-items: center !important;
  gap: clamp(32px, 4.8vw, 72px) !important;
  min-height: auto !important;
  transform: none !important;
}

.hero-center {
  width: min(620px, 100%) !important;
  text-align: left !important;
}

.hero-kicker {
  min-height: 36px !important;
  margin: 0 0 18px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(124,255,178,.22) !important;
  border-radius: 999px !important;
  color: var(--accent) !important;
  background: rgba(124,255,178,.08) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.hero h1,
.section-title,
.contact-title,
.materials-hero h1,
.sounds-hero h1,
.icons-hero h1,
.tools-hero h1,
.pixel-tool-hero h1 {
  color: var(--text) !important;
  letter-spacing: -.035em !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.hero h1 {
  gap: 0 !important;
  font-size: clamp(4rem, 5.8vw, 5.15rem) !important;
  line-height: .98 !important;
  font-weight: 900 !important;
}

.hero h1 span,
.hero h1 span:nth-of-type(even) {
  color: var(--text) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.hero h1 span:nth-of-type(even) {
  color: #dff8ea !important;
}

.hero p {
  margin-top: 22px !important;
  max-width: 520px !important;
  color: var(--text-muted) !important;
  font-size: clamp(17px, 1.18vw, 20px) !important;
  line-height: 1.65 !important;
  text-shadow: none !important;
}

.hero-actions {
  margin-top: 34px !important;
  gap: 12px !important;
}

.hero-actions .cta,
.hero-actions .ghost {
  min-width: 146px !important;
  min-height: 50px !important;
  font-size: 15px !important;
}

.hero-visual {
  position: relative !important;
  height: clamp(420px, 44vw, 560px) !important;
  min-height: 0 !important;
  padding: 48px 24px 24px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
    radial-gradient(circle at 72% 18%, rgba(124,255,178,.08), transparent 32%),
    var(--surface) !important;
  box-shadow: var(--shadow-soft) !important;
  overflow: hidden !important;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 38px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.035);
}

.hero-visual::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 18px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.36);
  box-shadow: 14px 0 rgba(255,255,255,.22), 28px 0 rgba(124,255,178,.52);
}

.hero-figure-slide {
  inset: 48px 22px 24px !important;
  transform: translate(var(--hero-figure-offset-x, 0px), var(--hero-figure-offset-y, 0px)) !important;
}

.hero-figure,
video.hero-figure {
  width: min(calc(100% * var(--hero-figure-scale, 1)), calc(700px * var(--hero-figure-scale, 1))) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  filter: none !important;
}

section[id],
.creator-marquee-section,
.materials-panel,
.pixel-tool-shell {
  scroll-margin-top: 104px;
}

.section-head {
  max-width: 760px;
  margin-bottom: 28px !important;
}

.section-head .eyebrow,
.materials-hero .eyebrow,
.sounds-hero .eyebrow,
.icons-hero .eyebrow {
  color: var(--accent) !important;
  letter-spacing: .08em !important;
  text-shadow: none !important;
}

.section-title {
  font-size: clamp(2.05rem, 3.6vw, 3.7rem) !important;
  line-height: 1.06 !important;
}

.section-head p:not(.eyebrow),
.work-card p,
.hud-card p,
.process-card p,
.price-card p,
.testimonial-card p,
.contact-hub-copy p,
.community-copy p,
.footer,
.footer a {
  color: var(--text-muted) !important;
  text-shadow: none !important;
}

.creator-marquee-section {
  margin-top: -12px;
}

.creator-marquee-panel,
.reel-card,
.hud-card,
.work-card,
.price-card,
.process-card,
.testimonial-card,
.community-strip,
.contact-follow,
.materials-panel,
.sound-toolbar,
.sound-player,
.sound-card,
.sound-pagination,
.icons-panel,
.icon-toolbar,
.icon-grid,
.icon-pagination,
.material-card,
.sponsor-dialog,
.sponsor-pay-card,
.pixel-tool-card,
.pixel-tool-shell {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.025)),
    var(--surface) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: none !important;
}

.work-card:hover,
.hud-card:hover,
.price-card:hover,
.process-card:hover,
.testimonial-card:hover,
.sound-card:hover,
.pixel-tool-card:hover,
.sponsor-pay-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--border-strong) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
}

.work-card h3,
.hud-card h3,
.price-card h3,
.process-card h3,
.sound-card h2,
.material-copy h2,
.contact-hub-copy h2,
.contact-follow h2,
.community-copy h2,
.sponsor-dialog h2,
.pixel-tool-card h2 {
  color: var(--text) !important;
  text-shadow: none !important;
}

.work-media {
  aspect-ratio: 16 / 9 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-2) !important;
  overflow: hidden !important;
}

.work-media img,
.work-media video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.tag,
.step,
.font-kind,
.sound-card-head span,
.icon-tabs em,
.sound-tabs em,
.material-meta span,
.icon-modal-tags span,
.material-modal-tags span {
  border: 1px solid rgba(124,255,178,.16) !important;
  border-radius: 999px !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.cards-4,
.cards-5,
.work-grid,
.price-grid,
.testimonial-grid {
  gap: 18px !important;
}

.hud-card,
.work-card,
.process-card,
.price-card,
.testimonial-card {
  padding: clamp(18px, 2.2vw, 26px) !important;
}

.process-map {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.process-map .process-card {
  min-height: 0 !important;
}

.process-card::before,
.process-card::after,
.price-card::before,
.price-card::after,
.testimonial-card::before,
.testimonial-card::after {
  display: none !important;
}

.step {
  width: fit-content !important;
  min-width: 48px !important;
  min-height: 38px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 12px !important;
  font-size: 20px !important;
}

.price-card,
.price-card:nth-child(2) {
  border-top: 2px solid rgba(124,255,178,.42) !important;
  background:
    linear-gradient(180deg, rgba(124,255,178,.045), rgba(255,255,255,.02)),
    var(--surface) !important;
}

.price-card .price {
  color: var(--text) !important;
  text-shadow: none !important;
}

.creator-marquee-panel {
  padding: 18px !important;
}

.creator-marquee-head {
  margin-bottom: 14px !important;
}

.creator-chip {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: none !important;
}

.creator-chip-avatar {
  border-color: rgba(124,255,178,.22) !important;
  box-shadow: none !important;
}

.materials-hero,
.pixel-tool-hero {
  padding-top: clamp(44px, 6vw, 68px) !important;
  padding-bottom: clamp(18px, 3vw, 28px) !important;
}

.materials-hero h1,
.pixel-tool-hero h1 {
  font-size: clamp(2.3rem, 4.7vw, 4.5rem) !important;
}

.materials-hero p:not(.eyebrow),
.sounds-hero p:not(.eyebrow),
.icons-hero p:not(.eyebrow) {
  color: var(--text-muted) !important;
  text-shadow: none !important;
}

.materials-site:not(.sounds-site):not(.icons-site) .materials-hero {
  display: grid !important;
  grid-template-columns: minmax(220px, .32fr) minmax(0, 1fr) !important;
  align-items: end !important;
  gap: 18px 28px !important;
  padding-top: 40px !important;
  padding-bottom: 18px !important;
}

.materials-site:not(.sounds-site):not(.icons-site) .materials-hero h1 {
  font-size: clamp(2rem, 3.2vw, 3rem) !important;
}

.sounds-site .sounds-panel,
.icons-site .icons-panel {
  margin-top: clamp(12px, 2vw, 24px) !important;
}

.sound-toolbar,
.icon-toolbar {
  padding: 14px !important;
  gap: 14px !important;
}

.sound-tabs,
.icon-tabs {
  gap: 8px !important;
}

.sound-tabs button,
.icon-tabs button {
  min-height: 38px !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  color: var(--text-muted) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.sound-tabs button:hover,
.sound-tabs button.active,
.icon-tabs button:hover,
.icon-tabs button.active {
  color: #06100c !important;
  border-color: rgba(124,255,178,.62) !important;
  background: var(--accent) !important;
}

.sound-search input,
.icon-search input,
.pixel-field input,
.contact-form input,
.contact-form textarea {
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  color: var(--text) !important;
  background: rgba(6,10,14,.72) !important;
  box-shadow: none !important;
}

.sound-search input:focus,
.icon-search input:focus,
.pixel-field input:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(124,255,178,.5) !important;
  box-shadow: 0 0 0 3px rgba(124,255,178,.08) !important;
  outline: 0 !important;
}

.sound-search span,
.icon-search span,
.pixel-field span,
.pixel-toggle strong,
.pixel-toggle small,
.sound-page-status,
.icon-page-status {
  color: var(--text-muted) !important;
  text-shadow: none !important;
}

.materials-site:not(.sounds-site):not(.icons-site) .materials-grid,
.icons-site .icon-grid {
  border-color: var(--border) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    rgba(12,17,23,.82) !important;
  background-size: 28px 28px, 28px 28px, auto !important;
  box-shadow: var(--shadow-card) !important;
}

.icons-site .icon-card,
.icons-site .icon-card-visual,
.materials-site:not(.sounds-site):not(.icons-site) .material-card {
  border-color: var(--border) !important;
  background:
    linear-gradient(45deg, rgba(255,255,255,.038) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.038) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.038) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.038) 75%),
    rgba(15,21,28,.9) !important;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0, 0 0 !important;
  background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, auto !important;
  box-shadow: none !important;
}

.icons-site .icon-card:hover,
.icons-site .icon-card.is-selected,
.materials-site:not(.sounds-site):not(.icons-site) .material-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(124,255,178,.72) !important;
  background-color: rgba(124,255,178,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(124,255,178,.16) !important;
}

.icons-site .icon-preview-link,
.materials-site:not(.sounds-site):not(.icons-site) .material-preview-link {
  cursor: pointer !important;
}

.icon-preview img,
.material-preview img,
.icon-modal-preview img,
.material-modal-preview img,
.pixel-preview-frame img,
.pixel-preview-frame canvas {
  image-rendering: pixelated !important;
}

.sound-grid {
  gap: 10px !important;
}

.sound-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(160px, .7fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 72px !important;
  padding: 13px 16px !important;
  border-radius: var(--radius-md) !important;
}

.sound-card h2,
.sound-card p {
  margin: 0 !important;
}

.sound-card h2 {
  font-size: clamp(1rem, 1.2vw, 1.18rem) !important;
}

.sound-card p {
  font-size: 13px !important;
  color: var(--text-faint) !important;
}

.sound-waveform {
  height: 32px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: none !important;
  opacity: .72;
}

.sound-waveform i {
  background: rgba(124,255,178,.58) !important;
  box-shadow: none !important;
}

.sound-actions {
  gap: 8px !important;
}

.sound-actions button:hover,
.sound-actions a:hover,
.material-download:hover,
.material-modal-download:hover,
.icon-modal-download:hover {
  color: #06100c !important;
  border-color: rgba(124,255,178,.62) !important;
  background: var(--accent) !important;
}

.sound-pagination,
.icon-pagination {
  padding: 12px 16px !important;
}

.sound-pagination button,
.icon-pagination button,
.sound-page-numbers button,
.icon-page-numbers button {
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: none !important;
}

.sound-pagination button:hover,
.sound-pagination button.active,
.icon-pagination button:hover,
.icon-pagination button.active,
.sound-page-numbers button:hover,
.sound-page-numbers button.active,
.icon-page-numbers button:hover,
.icon-page-numbers button.active {
  color: #06100c !important;
  border-color: rgba(124,255,178,.62) !important;
  background: var(--accent) !important;
}

.icon-grid .icon-empty:not([hidden]),
.sound-empty:not([hidden]),
.empty-materials {
  border: 1px dashed var(--border-strong) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-muted) !important;
  background: rgba(17,23,32,.74) !important;
  box-shadow: none !important;
  text-align: center !important;
  writing-mode: horizontal-tb !important;
}

.icon-grid .icon-empty h2,
.sound-empty h2,
.empty-materials h2,
.icon-grid .icon-empty p,
.sound-empty p,
.empty-materials p {
  color: inherit !important;
  text-shadow: none !important;
  writing-mode: horizontal-tb !important;
}

.material-modal,
.icon-modal,
.sponsor-modal {
  color: var(--text) !important;
}

.material-modal-backdrop,
.icon-modal-backdrop,
.sponsor-backdrop {
  background: rgba(7,10,13,.72) !important;
  backdrop-filter: blur(16px) !important;
}

.material-modal-dialog,
.icon-modal-dialog,
.sponsor-dialog {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.024)),
    var(--surface) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.46) !important;
}

.material-modal-preview,
.icon-modal-preview {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background:
    linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.04) 75%),
    #0c1117 !important;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0, 0 0 !important;
  background-size: 24px 24px, 24px 24px, 24px 24px, 24px 24px, auto !important;
  box-shadow: none !important;
}

.material-modal-close,
.icon-modal-close,
.sponsor-close {
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: none !important;
}

.material-modal-close:hover,
.icon-modal-close:hover,
.sponsor-close:hover {
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
  background: rgba(255,255,255,.08) !important;
}

.pixel-tool-site .media-bg {
  opacity: .1 !important;
}

.pixel-tool-hero {
  max-width: var(--container-width) !important;
}

.pixel-tool-hero h1 {
  max-width: 900px;
  font-size: clamp(2.5rem, 4.8vw, 4.7rem) !important;
}

.pixel-tool-shell {
  padding: clamp(18px, 2.6vw, 30px) !important;
}

.pixel-tool-grid,
.pixel-preview-grid {
  gap: 18px !important;
}

.pixel-tool-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.024)),
    var(--surface) !important;
}

.pixel-dropzone {
  border: 1px dashed rgba(124,255,178,.28) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text) !important;
  background: rgba(124,255,178,.045) !important;
  box-shadow: none !important;
}

.pixel-dropzone:hover,
.pixel-dropzone:focus-visible,
.pixel-dropzone.is-dragging {
  border-color: rgba(124,255,178,.62) !important;
  background: rgba(124,255,178,.08) !important;
  box-shadow: 0 0 0 3px rgba(124,255,178,.08) !important;
}

.pixel-preview-frame {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background:
    linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.04) 75%),
    #0c1117 !important;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0, 0 0 !important;
  background-size: 24px 24px, 24px 24px, 24px 24px, 24px 24px, auto !important;
}

.pixel-empty,
.pixel-warning,
.pixel-error,
.pixel-file-summary {
  color: var(--text-muted) !important;
  text-shadow: none !important;
}

.pixel-toggle {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 12px !important;
  align-items: start !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.035) !important;
}

.pixel-toggle input {
  margin-top: 3px !important;
}

#contact.contact-hub {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.016)),
    rgba(9,13,18,.86) !important;
}

.contact-hub::before {
  opacity: .12 !important;
}

.contact-hub-pager span,
.contact-socials a {
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

.contact-hub-pager .is-active,
.contact-socials a:hover {
  color: var(--accent) !important;
  border-color: rgba(124,255,178,.38) !important;
}

.community-strip {
  border-color: rgba(124,255,178,.16) !important;
}

.community-mark {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

.footer {
  color: var(--text-faint) !important;
}

@media (max-width: 1180px) {
  .hero-stage {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr) !important;
    gap: 28px !important;
  }

  .hero h1 {
    font-size: clamp(3.4rem, 6.6vw, 4.8rem) !important;
  }

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

@media (max-width: 860px) {
  .container,
  .nav,
  .mobile-nav {
    width: min(100% - 24px, var(--container-width)) !important;
  }

  .nav {
    border-radius: 18px !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .nav-links,
  .nav-actions {
    width: 100% !important;
  }

  .nav-links {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  .nav-actions {
    justify-content: flex-start !important;
  }

  .hero {
    padding-top: 42px !important;
  }

  .hero-stage {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .hero-center {
    width: 100% !important;
  }

  .hero h1 {
    font-size: clamp(3rem, 14vw, 4.4rem) !important;
    line-height: 1 !important;
  }

  .hero p {
    font-size: 16px !important;
  }

  .hero-visual {
    height: clamp(280px, 72vw, 420px) !important;
    padding: 42px 14px 16px !important;
  }

  video.hero-figure,
  .hero-figure {
    width: min(100%, 560px) !important;
    max-height: 100% !important;
  }

  .cards-4,
  .cards-5,
  .work-grid,
  .price-grid,
  .testimonial-grid,
  .contact-grid,
  .pixel-tool-grid,
  .pixel-preview-grid,
  .process-map {
    grid-template-columns: 1fr !important;
  }

  .materials-site:not(.sounds-site):not(.icons-site) .materials-hero {
    display: block !important;
  }

  .materials-site:not(.sounds-site):not(.icons-site) .materials-hero h1,
  .pixel-tool-hero h1 {
    font-size: clamp(2.2rem, 11vw, 3.6rem) !important;
  }

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

  .sound-card {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .sound-waveform {
    width: 100% !important;
  }

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

  .sound-actions button,
  .sound-actions a {
    flex: 1 1 0 !important;
  }
}

@media (max-width: 560px) {
  .nav {
    padding: 10px !important;
  }

  .brand {
    max-width: 100%;
  }

  .hero-kicker {
    min-height: 34px !important;
    font-size: 13px !important;
  }

  .hero-actions .cta,
  .hero-actions .ghost {
    width: 100%;
  }

  .materials-site:not(.sounds-site):not(.icons-site) .materials-grid,
  .icons-site .icon-grid {
    border-radius: 16px !important;
  }

  .material-modal-dialog,
  .icon-modal-dialog,
  .sponsor-dialog {
    width: min(100% - 24px, 520px) !important;
    max-height: calc(100vh - 24px) !important;
  }

  .pixel-tool-shell {
    padding: 14px !important;
  }

  .pixel-presets {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* Keep the home hero media transparent-only while preserving editor controls. */
.hero-visual {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.hero-visual::before,
.hero-visual::after {
  display: none !important;
  content: none !important;
}

.hero-figure-slide {
  inset: 0 !important;
}

/* Bridge the pointer gap between the top nav tool button and its submenu. */
.nav-submenu {
  top: calc(100% + 10px) !important;
  z-index: 90 !important;
}

.nav-submenu::before {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 100% !important;
  left: 0 !important;
  display: block !important;
  height: 16px !important;
  background: transparent !important;
}

.nav-submenu a::before {
  display: none !important;
}

.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
  visibility: visible !important;
}