@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700;800&display=swap');

/* SuperFX revamp inspired by Plinth's light editorial/SaaS aesthetic. */
:root {
  --bg: #f7f7f3;
  --fg: #181815;
  --muted: rgba(24, 24, 21, 0.62);
  --accent: #445bd4;
  --accent-soft: #dfe4ff;
  --wash: #858db1;
  --line: rgba(24, 24, 21, 0.12);
  --card-bg: rgba(255, 255, 255, 0.72);
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
}

html,
body {
  max-width: 100%;
  overflow-x: clip !important;
  background: var(--bg) !important;
  color: var(--fg) !important;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden !important; }
}

body {
  cursor: auto !important;
  background:
    linear-gradient(90deg, rgba(116, 124, 166, 0.88) 0%, rgba(223, 227, 242, 0.72) 43%, rgba(247, 247, 243, 1) 76%),
    #f7f7f3 !important;
}
body::before {
  opacity: 0.018 !important;
  mix-blend-mode: multiply;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(24,24,21,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,24,21,0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent 0, black 28%, black 82%, transparent 100%);
}

.cursor,
.cursor-ring { display: none !important; }

nav {
  position: sticky !important;
  top: 12px !important;
  z-index: 1000;
  width: calc(100% - 80px) !important;
  margin: 12px auto 0 !important;
  padding: 12px 16px !important;
  background: rgba(247, 247, 243, 0.76) !important;
  border: 1px solid rgba(24, 24, 21, 0.1);
  box-shadow: none !important;
  backdrop-filter: blur(18px);
}
nav::after { display: none !important; }
.nav-logo img {
  height: 34px !important;
  width: auto !important;
  filter: invert(1) contrast(1.2) saturate(0) !important;
  mix-blend-mode: multiply !important;
}
.nav-links { gap: clamp(18px, 3vw, 38px) !important; }
.nav-links a,
.nav-shop-mobile {
  color: rgba(24,24,21,0.64) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}
.nav-links a:hover,
.nav-links a.active { color: var(--fg) !important; }
.nav-cta,
.contact-cta,
.buy-btn,
.pay-btn {
  color: #fff !important;
  background: #111 !important;
  border: 1px solid #111 !important;
  box-shadow: none !important;
  transform: none !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  border-radius: 0 !important;
}
.nav-cta:hover,
.contact-cta:hover,
.buy-btn:hover,
.pay-btn:hover { background: var(--accent) !important; border-color: var(--accent) !important; }

.hero,
.page-header {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 96px);
  height: auto !important;
  padding: clamp(72px, 10vh, 120px) clamp(24px, 4.5vw, 72px) clamp(56px, 8vh, 96px) !important;
  background:
    linear-gradient(90deg, rgba(117,126,170,0.84), rgba(232,235,246,0.78) 48%, rgba(247,247,243,0.95) 78%),
    #f7f7f3 !important;
  overflow: hidden;
}
.hero::after,
.page-header::after {
  content: '';
  position: absolute;
  top: 5vh;
  right: clamp(-40px, 5vw, 80px);
  width: min(46vw, 620px);
  height: min(80vh, 720px);
  z-index: -1;
  background: url('superfx_icon.png') center / contain no-repeat;
  opacity: 0.14;
  filter: grayscale(1) contrast(1.15);
  mix-blend-mode: multiply;
}
#waveCanvas { opacity: 0.16 !important; mix-blend-mode: multiply; filter: grayscale(1); }
.hero-eyebrow,
.page-eyebrow,
.section-label {
  color: var(--accent) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.hero-eyebrow::before,
.page-eyebrow::before { background: var(--accent) !important; }
.hero-headline,
.page-headline {
  max-width: 780px;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: clamp(58px, 8.2vw, 118px) !important;
  font-weight: 800 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.06em !important;
  text-transform: none !important;
  margin-top: 26px;
}
.page-headline { color: var(--fg) !important; max-width: 880px; }
.hero-headline .line:nth-child(3),
.page-headline .line:nth-child(2) {
  display: block;
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
  color: rgba(255,255,255,0.94) !important;
  text-transform: none !important;
}
.page-headline .line:nth-child(2) { color: var(--wash) !important; }
.hero-headline em,
.page-headline em,
.about-headline em,
.contact-headline em {
  color: inherit !important;
  -webkit-text-stroke: 0 !important;
  font-style: inherit !important;
}
.hero-bottom,
.page-header-bottom {
  margin-top: clamp(30px, 5vw, 64px) !important;
  border-top: 0 !important;
  align-items: start !important;
}
.hero-desc,
.page-header-desc {
  max-width: 560px !important;
  color: rgba(255,255,255,0.86) !important;
  font-size: clamp(17px, 1.65vw, 22px) !important;
  line-height: 1.48 !important;
}
.page-header-desc { color: var(--muted) !important; }
.scroll-indicator { display: none !important; }

.marquee-section {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,0.72) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  transform: none !important;
  overflow: hidden !important;
}
.marquee-track span {
  color: rgba(24,24,21,0.7) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}
.marquee-track .dot { color: var(--accent) !important; }

section,
.shop-section,
.contact-section,
.info-strip,
footer {
  position: relative;
  z-index: 1;
  background-color: #f7f7f3 !important;
}
section,
.shop-section {
  padding-left: clamp(24px, 6vw, 96px) !important;
  padding-right: clamp(24px, 6vw, 96px) !important;
}
section:not(.hero)::before,
.shop-section::before,
.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(24,24,21,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,24,21,0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}
.about-grid,
.services-grid,
.video-grid,
.product-grid,
.info-strip,
#pricing > div,
.process-list {
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,0.54) !important;
  box-shadow: none !important;
}
.about-headline,
.work-headline,
.contact-headline {
  color: var(--fg) !important;
  font-size: clamp(44px, 6vw, 86px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.98 !important;
  text-transform: none !important;
}
.about-headline em,
.contact-headline em {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  color: var(--wash) !important;
}
.about-text,
.service-desc,
.process-desc,
.product-desc,
.info-item-desc,
.include-list li,
.footer-copy {
  color: var(--muted) !important;
}
.pill,
.product-tag,
.product-badge {
  background: #fff !important;
  color: var(--fg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}
.service-card,
.product-card,
.info-item {
  background: rgba(255,255,255,0.38) !important;
  border-color: var(--line) !important;
  transition: background 0.2s ease, transform 0.2s ease;
}
.service-card:hover,
.product-card:hover,
.info-item:hover { background: rgba(255,255,255,0.82) !important; transform: translateY(-2px); }
.service-num,
.process-num,
.product-num,
.info-item-icon,
.product-price { color: var(--accent) !important; font-family: var(--font-mono) !important; }
.service-icon { color: var(--accent) !important; }
.service-title,
.process-title,
.product-name,
.info-item-title {
  color: var(--fg) !important;
  letter-spacing: -0.035em !important;
  text-transform: none !important;
}

.video-cell {
  background: #ecece7 !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.video-cell video {
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.18) saturate(0.75) contrast(0.96) brightness(1.08);
  opacity: 0.92;
  transition: filter 0.2s ease, transform 0.25s ease;
}
.video-cell:hover video { filter: none; transform: scale(1.018); }
.video-meta {
  background: linear-gradient(180deg, transparent, rgba(247,247,243,0.94)) !important;
  color: var(--fg) !important;
}
.video-title { color: var(--fg) !important; }
.video-tag { color: rgba(24,24,21,0.56) !important; }
.work-link,
.contact-email,
#how-to-request a,
.footer-socials a,
.info-item-desc a { color: var(--accent) !important; }
.process-item { border-color: var(--line) !important; }

#pricing > div { transform: none !important; }
#pricing .service-card:nth-child(2),
.product-card.featured { background: rgba(255,255,255,0.76) !important; }
.product-visual {
  background:
    linear-gradient(135deg, rgba(68,91,212,0.12), transparent 56%),
    #f2f3f8 !important;
}
.product-waveform canvas { opacity: 0.75; filter: grayscale(1) contrast(0.9); mix-blend-mode: multiply; }
.product-play,
.preview-arrow {
  background: #111 !important;
  border: 1px solid #111 !important;
  color: #fff !important;
}
.preview-dot.active { background: var(--accent) !important; }
.include-list li::before { color: var(--accent) !important; }

.contact-section { text-align: center; }
.modal {
  background: #f7f7f3 !important;
  color: var(--fg) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 28px 70px rgba(24,24,21,0.18) !important;
}
.form-input,
.stripe-field,
.order-summary {
  background: #fff !important;
  color: var(--fg) !important;
  border-color: var(--line) !important;
}
footer { border-top-color: var(--line) !important; }

@media (max-width: 900px) {
  body { padding-top: 0 !important; }
  nav {
    top: 8px !important;
    width: calc(100% - 32px) !important;
    margin-top: 8px !important;
  }
  .nav-logo img { height: 30px !important; }
  .hero,
  .page-header {
    min-height: auto;
    padding-top: 72px !important;
  }
  .hero::after,
  .page-header::after {
    width: 72vw;
    height: 56vh;
    right: -20vw;
    top: 14vh;
    opacity: 0.1;
  }
  .hero-headline,
  .page-headline { font-size: clamp(52px, 15vw, 92px) !important; }
  .hero-desc,
  .page-header-desc { font-size: 17px !important; color: rgba(24,24,21,0.68) !important; }
  .hero-headline { color: var(--fg) !important; }
  .hero-headline .line:nth-child(3) { color: var(--wash) !important; }
  .services-grid,
  .video-grid { border-left: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; }
}

@media (max-width: 600px) {
  nav { padding: 10px 12px !important; }
  .nav-cta,
  .nav-shop-mobile { font-size: 12px !important; padding: 10px 14px !important; }
  .hero,
  .page-header { padding-left: 20px !important; padding-right: 20px !important; }
  .hero-headline,
  .page-headline { font-size: clamp(44px, 13.5vw, 66px) !important; max-width: calc(100vw - 40px); }
  .marquee-track { contain: layout paint; width: 100% !important; max-width: 100% !important; overflow: hidden; }
  section,
  .shop-section { padding-left: 20px !important; padding-right: 20px !important; }
  .about-headline,
  .work-headline,
  .contact-headline { font-size: clamp(38px, 12vw, 56px) !important; }
  .product-grid { transform: none !important; }
}
/* SuperFX dark palette + fluorescent DAW green override. */
:root {
  --bg: #080808;
  --fg: #f0ede8;
  --muted: rgba(240, 237, 232, 0.56);
  --accent: #e8d5b0;
  --accent-soft: rgba(232, 213, 176, 0.14);
  --wash: #121212;
  --line: rgba(240, 237, 232, 0.12);
  --card-bg: rgba(15, 15, 15, 0.74);
  --neon: #9cff00;
  --neon-soft: rgba(156, 255, 0, 0.14);
}

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

body {
  background:
    radial-gradient(circle at 78% 12%, rgba(156,255,0,0.13), transparent 24vw),
    radial-gradient(circle at 14% 18%, rgba(232,213,176,0.16), transparent 25vw),
    linear-gradient(90deg, rgba(8,8,8,1) 0%, rgba(15,15,15,0.96) 44%, rgba(8,8,8,1) 100%) !important;
}
body::before {
  opacity: 0.04 !important;
  mix-blend-mode: screen !important;
}
body::after {
  background:
    linear-gradient(rgba(240,237,232,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,237,232,0.04) 1px, transparent 1px) !important;
  opacity: 0.62;
  mask-image: linear-gradient(to bottom, transparent 0, black 22%, black 86%, transparent 100%);
}

nav {
  background: rgba(8,8,8,0.72) !important;
  border: 1px solid var(--line) !important;
  backdrop-filter: blur(18px) saturate(1.2);
}
.nav-logo img {
  filter: none !important;
  mix-blend-mode: screen !important;
}
.nav-links a,
.nav-shop-mobile {
  color: rgba(240,237,232,0.62) !important;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--neon) !important;
}
.nav-cta,
.contact-cta,
.buy-btn,
.pay-btn {
  color: #080808 !important;
  background: var(--fg) !important;
  border-color: var(--fg) !important;
}
.nav-cta:hover,
.contact-cta:hover,
.buy-btn:hover,
.pay-btn:hover {
  color: #080808 !important;
  background: var(--neon) !important;
  border-color: var(--neon) !important;
}

.hero,
.page-header {
  background:
    radial-gradient(circle at 78% 18%, rgba(156,255,0,0.16), transparent 22vw),
    linear-gradient(90deg, rgba(8,8,8,1) 0%, rgba(20,19,17,0.94) 47%, rgba(8,8,8,0.98) 100%) !important;
}
.hero::after,
.page-header::after {
  opacity: 0.18 !important;
  filter: grayscale(1) contrast(1.1) brightness(1.8) !important;
  mix-blend-mode: screen !important;
}
#waveCanvas {
  opacity: 0.34 !important;
  filter: saturate(1.3) contrast(1.1) !important;
  mix-blend-mode: screen !important;
}
.hero-eyebrow,
.page-eyebrow,
.section-label {
  color: var(--neon) !important;
}
.hero-eyebrow::before,
.page-eyebrow::before {
  background: var(--neon) !important;
}
.hero-headline,
.page-headline {
  color: var(--fg) !important;
}
.hero-headline .line:nth-child(3),
.page-headline .line:nth-child(2) {
  color: var(--accent) !important;
}
.hero-desc,
.page-header-desc {
  color: rgba(240,237,232,0.72) !important;
}

.marquee-section {
  background: rgba(15,15,15,0.86) !important;
  border-color: var(--line) !important;
}
.marquee-track span {
  color: rgba(240,237,232,0.64) !important;
}
.marquee-track .dot {
  color: var(--neon) !important;
}

section,
.shop-section,
.contact-section,
.info-strip,
footer {
  background-color: var(--bg) !important;
}
section:not(.hero)::before,
.shop-section::before,
.contact-section::before {
  background:
    linear-gradient(rgba(240,237,232,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,237,232,0.035) 1px, transparent 1px) !important;
}
.about-grid,
.services-grid,
.video-grid,
.product-grid,
.info-strip,
#pricing > div,
.process-list {
  border-color: var(--line) !important;
  background: rgba(15,15,15,0.64) !important;
}
.about-headline,
.work-headline,
.contact-headline,
.service-title,
.process-title,
.product-name,
.info-item-title,
.video-title {
  color: var(--fg) !important;
}
.about-headline em,
.contact-headline em {
  color: var(--accent) !important;
}
.about-text,
.service-desc,
.process-desc,
.product-desc,
.info-item-desc,
.include-list li,
.footer-copy,
.video-tag {
  color: var(--muted) !important;
}
.pill,
.product-tag,
.product-badge {
  background: rgba(156,255,0,0.08) !important;
  color: var(--neon) !important;
  border-color: rgba(156,255,0,0.28) !important;
}
.service-card,
.product-card,
.info-item {
  background: rgba(15,15,15,0.52) !important;
  border-color: var(--line) !important;
}
.service-card:hover,
.product-card:hover,
.info-item:hover,
#pricing .service-card:nth-child(2),
.product-card.featured {
  background: rgba(156,255,0,0.07) !important;
}
.service-num,
.process-num,
.product-num,
.info-item-icon,
.product-price,
.service-icon,
.work-link,
.contact-email,
#how-to-request a,
.footer-socials a,
.info-item-desc a {
  color: var(--neon) !important;
}

.video-cell {
  background: #111 !important;
}
.video-cell video {
  filter: saturate(0.78) contrast(1.05) brightness(0.82) !important;
  opacity: 0.9;
}
.video-cell:hover video {
  filter: saturate(1.08) contrast(1.12) brightness(0.98) !important;
}
.video-meta {
  background: linear-gradient(180deg, transparent, rgba(8,8,8,0.94)) !important;
}

.product-visual {
  background:
    radial-gradient(circle at center, rgba(156,255,0,0.13), transparent 44%),
    #101010 !important;
}
.product-waveform canvas {
  filter: saturate(1.4) contrast(1.2) !important;
  mix-blend-mode: screen !important;
}
.product-play,
.preview-arrow {
  color: #080808 !important;
  background: var(--neon) !important;
  border-color: var(--neon) !important;
}
.preview-dot.active,
.include-list li::before {
  background: var(--neon) !important;
  color: var(--neon) !important;
}

.contact-section {
  background:
    radial-gradient(circle at 50% 10%, rgba(156,255,0,0.1), transparent 32vw),
    #080808 !important;
}
.modal,
.form-input,
.stripe-field,
.order-summary {
  background: #0f0f0f !important;
  color: var(--fg) !important;
  border-color: var(--line) !important;
}

@media (max-width: 900px) {
  .hero-desc,
  .page-header-desc {
    color: rgba(240,237,232,0.72) !important;
  }
  .hero-headline .line:nth-child(3) {
    color: var(--accent) !important;
  }
}
/* Final polish: spacing, full header, cleaner green gradient, flat logo treatment. */
body {
  background:
    linear-gradient(112deg, rgba(156,255,0,0.18) 0%, rgba(24,27,18,0.72) 28%, rgba(8,8,8,1) 62%, rgba(8,8,8,1) 100%) !important;
}

body::after {
  opacity: 0.38 !important;
}

nav {
  top: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px clamp(20px, 4vw, 56px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background: rgba(8,8,8,0.76) !important;
}

.nav-logo {
  width: 72px !important;
  height: 38px !important;
  display: block !important;
  background: url('logo.png') left center / contain no-repeat !important;
}

.nav-logo img {
  opacity: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.hero,
.page-header {
  background:
    linear-gradient(112deg, rgba(156,255,0,0.18) 0%, rgba(18,20,14,0.88) 32%, rgba(8,8,8,0.98) 68%, rgba(8,8,8,1) 100%) !important;
}

.hero::after {
  opacity: 0.92 !important;
  filter: brightness(0) invert(1) !important;
  mix-blend-mode: normal !important;
  right: clamp(24px, 5vw, 88px) !important;
  width: min(44vw, 560px) !important;
  height: min(64vh, 520px) !important;
}

.page-header::after {
  opacity: 0.28 !important;
  filter: brightness(0) invert(1) !important;
  mix-blend-mode: normal !important;
}

.about-grid,
.services-grid,
.video-grid,
.product-grid,
.info-strip,
#pricing > div,
.process-list {
  padding: clamp(16px, 2.2vw, 32px) !important;
  gap: clamp(12px, 1.8vw, 22px) !important;
  background: rgba(15,15,15,0.58) !important;
}

.about-grid {
  align-items: start !important;
}

.service-card,
.product-card,
.info-item,
.process-item {
  border: 1px solid var(--line) !important;
  padding: clamp(28px, 3vw, 48px) !important;
}

.video-cell {
  border: 1px solid var(--line) !important;
}

.video-meta {
  padding: 28px !important;
}

.product-card.featured {
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.product-card.featured .product-info {
  padding: clamp(34px, 4vw, 58px) !important;
}

.product-card.featured .product-visual {
  min-height: 380px !important;
}

.product-badge {
  top: 24px !important;
  right: 24px !important;
}

.product-footer,
.order-summary,
.modal-header,
.modal-body {
  padding-left: clamp(20px, 3vw, 32px) !important;
  padding-right: clamp(20px, 3vw, 32px) !important;
}

.pill-list,
.product-tags,
.footer-socials {
  gap: 10px !important;
}

.pill,
.product-tag,
.product-badge {
  padding: 9px 12px !important;
}

.contact-section {
  background:
    linear-gradient(112deg, rgba(156,255,0,0.12) 0%, rgba(12,13,10,0.96) 36%, rgba(8,8,8,1) 100%) !important;
}

@media (max-width: 900px) {
  nav {
    position: fixed !important;
    width: 100% !important;
    padding: 12px 20px !important;
  }

  .nav-logo {
    width: 58px !important;
    height: 32px !important;
  }

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

  .hero::after {
    opacity: 0.18 !important;
    right: -22vw !important;
    width: 82vw !important;
    height: 58vh !important;
  }

  .about-grid,
  .services-grid,
  .video-grid,
  .product-grid,
  .info-strip,
  #pricing > div,
  .process-list {
    padding: 14px !important;
    gap: 14px !important;
  }
}

@media (max-width: 600px) {
  .service-card,
  .product-card,
  .info-item,
  .process-item {
    padding: 24px !important;
  }

  .video-meta {
    padding: 22px !important;
  }

  .product-card.featured .product-info {
    padding: 28px !important;
  }
}
/* Use generated transparent white logo assets instead of filtered rectangular source images. */
.nav-logo {
  width: 84px !important;
  height: 38px !important;
  background: url('logo_flat_white.png') left center / contain no-repeat !important;
}

.hero::after {
  background-image: url('superfx_flat_white.png') !important;
  opacity: 0.88 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  width: min(40vw, 520px) !important;
  height: min(42vh, 360px) !important;
  top: 24vh !important;
  right: clamp(48px, 8vw, 120px) !important;
}

.page-header::after {
  background-image: url('superfx_flat_white.png') !important;
  opacity: 0.18 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

@media (max-width: 900px) {
  .nav-logo {
    width: 66px !important;
    height: 32px !important;
  }

  .hero::after {
    opacity: 0.18 !important;
    top: 24vh !important;
    right: -24vw !important;
    width: 78vw !important;
    height: 34vh !important;
  }
}
/* Let oversized italic headline strokes breathe instead of clipping at the line box. */
.hero-headline,
.page-headline,
.hero-headline .line,
.page-headline .line {
  overflow: visible !important;
}
/* Hero/pricing/shop polish requested after dark revamp. */
.hero {
  padding-top: clamp(72px, 7vh, 96px) !important;
  justify-content: flex-start !important;
  gap: clamp(28px, 4vh, 46px) !important;
}

.hero::after {
  display: none !important;
}

.hero-headline {
  max-width: 980px !important;
  font-size: clamp(82px, 11.2vw, 168px) !important;
  line-height: 0.86 !important;
  margin-top: clamp(12px, 2vh, 24px) !important;
}

.hero-headline .line:nth-child(3) {
  font-size: 0.86em !important;
  line-height: 0.94 !important;
}

.hero-bottom {
  margin-top: 0 !important;
}

.hero-desc {
  max-width: 640px !important;
}

#pricing .service-card:nth-child(2),
#pricing .service-card:nth-child(2):not(:hover) {
  background: rgba(15,15,15,0.52) !important;
}

#pricing .service-card:nth-child(2) .service-num,
#pricing .service-card:nth-child(2) .service-icon,
#pricing .service-card:nth-child(2) [style*="font-size:48px"],
#pricing .service-card:nth-child(2) li span {
  color: var(--accent) !important;
}

#pricing .service-card:nth-child(2):hover {
  background: rgba(156,255,0,0.07) !important;
}

#pricing .service-card:nth-child(2):hover .service-num,
#pricing .service-card:nth-child(2):hover .service-icon,
#pricing .service-card:nth-child(2):hover [style*="font-size:48px"],
#pricing .service-card:nth-child(2):hover li span {
  color: var(--neon) !important;
}

.page-header::after {
  display: none !important;
}

.page-header {
  min-height: auto !important;
  padding-top: clamp(78px, 8vh, 104px) !important;
  padding-bottom: clamp(54px, 7vh, 82px) !important;
}

.page-headline {
  max-width: 1060px !important;
  font-size: clamp(86px, 12.2vw, 178px) !important;
  line-height: 0.84 !important;
  margin-top: clamp(12px, 2vh, 22px) !important;
}

.page-headline .line:nth-child(2) {
  font-size: 0.88em !important;
  line-height: 0.9 !important;
}

.page-header-bottom {
  margin-top: clamp(18px, 2.8vh, 30px) !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.page-header-desc {
  max-width: 680px !important;
  font-size: clamp(17px, 1.55vw, 22px) !important;
  line-height: 1.48 !important;
}

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

  .hero-headline {
    font-size: clamp(64px, 18vw, 118px) !important;
  }

  .page-headline {
    font-size: clamp(62px, 17vw, 112px) !important;
  }
}

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

  .hero-headline,
  .page-headline {
    font-size: clamp(52px, 15.5vw, 78px) !important;
    line-height: 0.88 !important;
  }

  .page-header-bottom {
    margin-top: 16px !important;
  }
}
/* Work cards can use accurate YouTube thumbnails as previews. */
.video-cell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.05) brightness(0.82);
  opacity: 0.9;
  transition: filter 0.2s ease, transform 0.25s ease;
}

.video-cell:hover img {
  filter: saturate(1.08) contrast(1.12) brightness(0.98);
  transform: scale(1.018);
}
/* YouTube work preview should behave like the local looping MP4 tiles. */
.video-cell .yt-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 125%;
  height: 125%;
  transform: translate(-50%, -50%) scale(1.03);
  border: 0;
  pointer-events: none;
  display: block;
  filter: saturate(0.78) contrast(1.05) brightness(0.82);
  opacity: 0.9;
  transition: filter 0.2s ease, transform 0.25s ease;
}

.video-cell:hover .yt-preview {
  filter: saturate(1.08) contrast(1.12) brightness(0.98);
  transform: translate(-50%, -50%) scale(1.06);
}
/* Final polish: shop hero spacing, section dividers, and preview controls. */
.page-header .page-headline {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(14px, 1.8vw, 28px) !important;
  line-height: 0.9 !important;
  padding-bottom: 0.08em !important;
}

.page-header .page-headline .line {
  display: block !important;
  line-height: 0.88 !important;
}

.page-header .page-headline .line:nth-child(2) {
  line-height: 0.92 !important;
  margin-top: 0 !important;
}

section:not(.hero)::before,
.shop-section::before,
.contact-section::before {
  display: none !important;
  content: none !important;
}

.section-label,
.hero-eyebrow,
.page-eyebrow {
  position: relative !important;
  z-index: 2 !important;
}

.product-card,
.product-card *,
.product-visual,
.product-waveform,
.product-waveform canvas {
  cursor: auto !important;
}

.product-play,
.preview-arrow,
.buy-btn,
.nav-cta,
.contact-cta,
.pay-btn {
  cursor: pointer !important;
}

.product-play {
  background: rgba(8,8,8,0.46) !important;
  border-color: rgba(240,237,232,0.18) !important;
  color: rgba(240,237,232,0.78) !important;
  box-shadow: none !important;
}

.product-play svg {
  fill: rgba(240,237,232,0.78) !important;
}

.product-card:hover .product-play,
.product-play:hover,
.product-play.playing {
  background: rgba(8,8,8,0.62) !important;
  border-color: rgba(156,255,0,0.42) !important;
  color: rgba(240,237,232,0.9) !important;
}

.product-card:hover .product-play svg,
.product-play:hover svg,
.product-play.playing svg {
  fill: rgba(240,237,232,0.9) !important;
}

@media (max-width: 900px) {
  .page-header .page-headline {
    gap: clamp(10px, 2.2vw, 18px) !important;
    line-height: 0.92 !important;
  }
}

@media (max-width: 600px) {
  .page-header .page-headline {
    gap: 10px !important;
    line-height: 0.94 !important;
  }

  .page-header .page-headline .line,
  .page-header .page-headline .line:nth-child(2) {
    line-height: 0.96 !important;
  }
}
body::after {
  display: none !important;
  content: none !important;
}
/* Keep the Pricing label consistent with other section labels. */
#pricing > .section-label {
  display: inline-flex !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 0 clamp(22px, 3vw, 36px) 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Match Pricing label dash gap and vertical rhythm to other section labels. */
#pricing > .section-label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 64px 0 !important;
}

#pricing > .section-label::before {
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 1px !important;
  margin: 0 !important;
}
/* Keep marquees seamless on mobile. The section clips; the moving track must not. */
.marquee-section {
  overflow: hidden !important;
}

.marquee-track {
  display: flex !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  will-change: transform;
}

@media (max-width: 600px) {
  .marquee-track {
    contain: none !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    animation-duration: 18s !important;
  }

  .marquee-track span {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .marquee-track span.dot {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* Main hero atmospheric figure, blended into the green/black background. */
.hero {
  overflow: hidden !important;
}

.hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: -18vw !important;
  bottom: 0 !important;
  width: min(68vw, 880px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 54% 45%, rgba(156,255,0,0.34) 0%, rgba(156,255,0,0.16) 24%, rgba(156,255,0,0.055) 44%, transparent 68%),
    linear-gradient(90deg, transparent 0%, rgba(156,255,0,0.12) 58%, transparent 100%) !important;
  opacity: 0.82 !important;
  mix-blend-mode: screen !important;
}

.hero::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  right: clamp(-44px, 4vw, 92px) !important;
  width: clamp(260px, 38vw, 560px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  transform: translateY(-44%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background: url('hero-green-figure.jpg') center / cover no-repeat !important;
  opacity: 0.78 !important;
  filter: grayscale(1) sepia(1) hue-rotate(42deg) saturate(7.2) brightness(1.1) contrast(1.18) !important;
  mix-blend-mode: screen !important;
  box-shadow: 0 0 120px rgba(156,255,0,0.28), 0 0 260px rgba(156,255,0,0.14) !important;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, black 34%, rgba(0,0,0,0.82) 49%, rgba(0,0,0,0.28) 66%, transparent 80%);
  mask-image: radial-gradient(circle at 50% 50%, black 0%, black 34%, rgba(0,0,0,0.82) 49%, rgba(0,0,0,0.28) 66%, transparent 80%);
}

.hero > :not(canvas) {
  position: relative !important;
  z-index: 2 !important;
}

#waveCanvas {
  z-index: 1 !important;
}

@media (max-width: 900px) {
  .hero::before {
    right: -44vw !important;
    width: 118vw !important;
    opacity: 0.46 !important;
  }

  .hero::after {
    top: 45% !important;
    right: -28vw !important;
    width: min(76vw, 430px) !important;
    opacity: 0.28 !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 600px) {
  .hero::before {
    right: -58vw !important;
    opacity: 0.34 !important;
  }

  .hero::after {
    right: -42vw !important;
    width: 92vw !important;
    opacity: 0.2 !important;
  }
}
/* Use the cleaned transparent character cutout instead of the square source photo. */
.hero::before {
  background: radial-gradient(circle at 58% 48%, rgba(156,255,0,0.28) 0%, rgba(156,255,0,0.13) 26%, rgba(156,255,0,0.045) 48%, transparent 72%) !important;
  opacity: 0.74 !important;
}

.hero::after {
  background: url('hero-green-figure-cutout.png') center / contain no-repeat !important;
  opacity: 0.9 !important;
  filter: drop-shadow(0 0 18px rgba(156,255,0,0.76)) drop-shadow(0 0 64px rgba(156,255,0,0.46)) drop-shadow(0 0 140px rgba(156,255,0,0.2)) !important;
  mix-blend-mode: screen !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

#waveCanvas {
  opacity: 0.075 !important;
}

@media (max-width: 900px) {
  .hero::after {
    opacity: 0.34 !important;
    right: -30vw !important;
  }
}

@media (max-width: 600px) {
  .hero::after {
    opacity: 0.22 !important;
    right: -44vw !important;
  }
}
/* Hero photo background: use the original image and let it dissolve into the green/black gradient. */
.hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  width: auto !important;
  right: auto !important;
  background:
    linear-gradient(90deg, rgba(8,8,8,1) 0%, rgba(8,8,8,0.86) 30%, rgba(8,8,8,0.2) 58%, rgba(8,8,8,0.78) 100%),
    linear-gradient(180deg, rgba(8,8,8,0.88) 0%, rgba(8,8,8,0.05) 34%, rgba(8,8,8,0.18) 68%, rgba(8,8,8,0.92) 100%),
    url('hero-green-figure.jpg') right center / min(52vw, 720px) auto no-repeat !important;
  opacity: 0.76 !important;
  filter: grayscale(1) sepia(1) hue-rotate(42deg) saturate(6.6) brightness(0.9) contrast(1.1) !important;
  mix-blend-mode: screen !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0,0,0,0.25) 42%, black 58%, rgba(0,0,0,0.72) 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0,0,0,0.25) 42%, black 58%, rgba(0,0,0,0.72) 78%, transparent 100%);
}

.hero::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 76% 42%, rgba(156,255,0,0.28) 0%, rgba(156,255,0,0.12) 23%, rgba(156,255,0,0.035) 45%, transparent 68%),
    linear-gradient(112deg, rgba(156,255,0,0.12) 0%, rgba(18,20,14,0.34) 30%, rgba(8,8,8,0.44) 72%, rgba(8,8,8,0.78) 100%) !important;
  opacity: 0.78 !important;
  filter: none !important;
  mix-blend-mode: screen !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.hero > :not(canvas) {
  position: relative !important;
  z-index: 3 !important;
}

#waveCanvas {
  z-index: 2 !important;
  opacity: 0.055 !important;
}

@media (max-width: 900px) {
  .hero::before {
    background:
      linear-gradient(90deg, rgba(8,8,8,1) 0%, rgba(8,8,8,0.74) 34%, rgba(8,8,8,0.36) 62%, rgba(8,8,8,0.88) 100%),
      linear-gradient(180deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.18) 45%, rgba(8,8,8,0.88) 100%),
      url('hero-green-figure.jpg') calc(100% + 70px) center / min(88vw, 560px) auto no-repeat !important;
    opacity: 0.42 !important;
  }

  .hero::after {
    opacity: 0.46 !important;
  }
}

@media (max-width: 600px) {
  .hero::before {
    background:
      linear-gradient(90deg, rgba(8,8,8,1) 0%, rgba(8,8,8,0.82) 42%, rgba(8,8,8,0.54) 72%, rgba(8,8,8,0.94) 100%),
      linear-gradient(180deg, rgba(8,8,8,0.94) 0%, rgba(8,8,8,0.22) 48%, rgba(8,8,8,0.92) 100%),
      url('hero-green-figure.jpg') calc(100% + 110px) center / 112vw auto no-repeat !important;
    opacity: 0.28 !important;
  }

  .hero::after {
    opacity: 0.34 !important;
  }
}
/* Make the hero photo visibly present, with only edge fading instead of covering gradients. */
.hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  width: auto !important;
  right: auto !important;
  background: url('hero-green-figure.jpg') right center / min(58vw, 760px) auto no-repeat !important;
  opacity: 0.72 !important;
  filter: grayscale(1) sepia(1) hue-rotate(42deg) saturate(7.4) brightness(1.22) contrast(1.18) !important;
  mix-blend-mode: screen !important;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 34%, rgba(0,0,0,0.62) 50%, black 66%, rgba(0,0,0,0.7) 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, black 16%, black 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 34%, rgba(0,0,0,0.62) 50%, black 66%, rgba(0,0,0,0.7) 82%, transparent 100%),
    linear-gradient(180deg, transparent 0%, black 16%, black 82%, transparent 100%);
  mask-composite: intersect;
}

.hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 78% 44%, rgba(156,255,0,0.2) 0%, rgba(156,255,0,0.075) 28%, transparent 58%),
    linear-gradient(112deg, rgba(156,255,0,0.1) 0%, rgba(8,8,8,0.08) 42%, rgba(8,8,8,0.34) 100%) !important;
  opacity: 0.46 !important;
  filter: none !important;
  mix-blend-mode: screen !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

@media (max-width: 900px) {
  .hero::before {
    background: url('hero-green-figure.jpg') calc(100% + 44px) center / min(92vw, 620px) auto no-repeat !important;
    opacity: 0.48 !important;
  }

  .hero::after {
    opacity: 0.34 !important;
  }
}

@media (max-width: 600px) {
  .hero::before {
    background: url('hero-green-figure.jpg') calc(100% + 92px) center / 118vw auto no-repeat !important;
    opacity: 0.34 !important;
  }

  .hero::after {
    opacity: 0.26 !important;
  }
}
/* Real hero image layer: visible, not pseudo-element dependent. */
.hero::before,
.hero::after {
  display: none !important;
  content: none !important;
}

.hero-photo-bg {
  position: absolute !important;
  top: 50% !important;
  right: clamp(42px, 7vw, 140px) !important;
  width: clamp(360px, 42vw, 760px) !important;
  aspect-ratio: 1 / 1 !important;
  transform: translateY(-48%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(8,8,8,0.96) 0%, rgba(8,8,8,0.18) 24%, rgba(8,8,8,0) 50%, rgba(8,8,8,0.2) 78%, rgba(8,8,8,0.96) 100%),
    linear-gradient(180deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0) 18%, rgba(8,8,8,0) 72%, rgba(8,8,8,0.96) 100%),
    url('hero-green-figure.jpg') center / cover no-repeat !important;
  opacity: 0.86 !important;
  filter: grayscale(1) sepia(1) hue-rotate(42deg) saturate(7.6) brightness(1.2) contrast(1.14) !important;
  mix-blend-mode: screen !important;
  border-radius: 0 !important;
  -webkit-mask-image: radial-gradient(circle at 52% 52%, black 0%, black 44%, rgba(0,0,0,0.78) 58%, rgba(0,0,0,0.28) 72%, transparent 86%);
  mask-image: radial-gradient(circle at 52% 52%, black 0%, black 44%, rgba(0,0,0,0.78) 58%, rgba(0,0,0,0.28) 72%, transparent 86%);
}

.hero-photo-bg::after {
  content: '' !important;
  position: absolute !important;
  inset: -18% !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 56% 48%, rgba(156,255,0,0.24) 0%, rgba(156,255,0,0.1) 28%, transparent 62%) !important;
  mix-blend-mode: screen !important;
}

.hero > :not(canvas):not(.hero-photo-bg) {
  position: relative !important;
  z-index: 3 !important;
}

#waveCanvas {
  z-index: 2 !important;
  opacity: 0.045 !important;
}

@media (max-width: 900px) {
  .hero-photo-bg {
    right: -18vw !important;
    width: min(78vw, 520px) !important;
    opacity: 0.45 !important;
  }
}

@media (max-width: 600px) {
  .hero-photo-bg {
    right: -38vw !important;
    width: 96vw !important;
    opacity: 0.3 !important;
  }
}
/* Correct hero photo placement: subtle right-side background, never a floating bright square. */
.hero-photo-bg {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(58vw, 860px) !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  transform: none !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.34 !important;
  background:
    linear-gradient(90deg, rgba(8,8,8,1) 0%, rgba(8,8,8,0.38) 22%, rgba(8,8,8,0) 48%, rgba(8,8,8,0.36) 80%, rgba(8,8,8,1) 100%),
    linear-gradient(180deg, rgba(8,8,8,0.95) 0%, rgba(8,8,8,0) 18%, rgba(8,8,8,0) 76%, rgba(8,8,8,0.96) 100%),
    url('hero-green-figure.jpg') right center / contain no-repeat !important;
  filter: grayscale(1) sepia(1) hue-rotate(42deg) saturate(4.2) brightness(0.82) contrast(1.04) !important;
  mix-blend-mode: screen !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.38) 20%, black 42%, black 78%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.38) 20%, black 42%, black 78%, transparent 100%) !important;
}

.hero-photo-bg::after {
  display: none !important;
  content: none !important;
}

.hero > :not(canvas):not(.hero-photo-bg) {
  position: relative !important;
  z-index: 3 !important;
}

#waveCanvas {
  z-index: 1 !important;
  opacity: 0.04 !important;
}

@media (max-width: 900px) {
  .hero-photo-bg {
    width: 72vw !important;
    right: -18vw !important;
    opacity: 0.22 !important;
  }
}

@media (max-width: 600px) {
  .hero-photo-bg {
    width: 104vw !important;
    right: -48vw !important;
    opacity: 0.16 !important;
  }
}
/* Mobile shop footer: keep price and Buy Now from crowding each other. */
@media (max-width: 600px) {
  .product-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  .product-footer > div {
    width: 100% !important;
  }

  .product-price {
    font-size: clamp(34px, 12vw, 44px) !important;
    line-height: 1 !important;
  }

  .product-footer .buy-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 15px 18px !important;
    min-height: 48px !important;
    white-space: nowrap !important;
  }
}