@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: auto; }

/* ---------- hero: true black, matching the video's own black exactly
   (the site's shared near-black "obsidian" tone, #0a0a0b, is a hair
   lighter than pure black - fine as a general page background, but
   visible as a seam right against the video, which decodes to pure
   black) ---------- */
#home { background: #000; }

/* ---------- hero video: soft edge fade (mobile) ----------
   On mobile the video is object-cover with visible top/bottom edges (the
   crop hides the left/right edges instead). A decoded video's "black" can
   render very slightly lighter than the page's own CSS black depending on
   the device, which shows up as a hairline seam right at that edge. Fading
   the video's own top/bottom into transparency blends it into the page
   background underneath instead of butting two different blacks together. */
@media (max-width: 639px) {
  #heroVideo {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }
}
body {
  background: #0a0a0b;
  color: #f5f4f0;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  overflow-x: hidden;
}
::selection { background: rgba(255,90,54,0.35); color: #f5f4f0; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- hero entrance (one-time on load, not scroll-triggered) ---------- */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-reveal {
  opacity: 0;
  animation: heroReveal .8s cubic-bezier(.16,1,.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .hero-reveal { opacity: 1; animation: none; }
}

/* ---------- hero: tiny music-wave bars next to the wordmark ---------- */
.hero-music-waves {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 1.1rem;
}
.hero-music-waves span {
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff5a36, #5a96ff);
  animation: heroWaveBounce 1.1s ease-in-out infinite;
  transform-origin: bottom;
}
.hero-music-waves span:nth-child(1) { height: 40%; animation-delay: 0s; }
.hero-music-waves span:nth-child(2) { height: 70%; animation-delay: .12s; }
.hero-music-waves span:nth-child(3) { height: 100%; animation-delay: .24s; }
.hero-music-waves span:nth-child(4) { height: 60%; animation-delay: .36s; }
.hero-music-waves span:nth-child(5) { height: 35%; animation-delay: .48s; }
@keyframes heroWaveBounce {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-music-waves span { animation: none; transform: scaleY(0.7); }
}

/* ---------- elevation scale (consistent depth across every card/panel surface) ---------- */
:root {
  --elev-1: 0 1px 2px rgba(0,0,0,0.35), 0 8px 20px -6px rgba(0,0,0,0.5);
  --elev-2: 0 1px 2px rgba(0,0,0,0.4), 0 16px 40px -10px rgba(0,0,0,0.6);
}

/* ---------- glass ---------- */
.glass {
  background: rgba(255,255,255,0.055);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), var(--elev-1);
}
.glass-strong {
  background: rgba(20,20,22,0.72);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), var(--elev-2);
}

/* ---------- label eyebrow ---------- */
.label-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9a9a98;
  font-weight: 600;
}

/* ---------- animated hairline border ---------- */
.animated-border {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.animated-border:hover { transform: translateY(-1px); box-shadow: var(--elev-1); }
.animated-border:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .animated-border:hover, .animated-border:active { transform: none; }
}

/* liquid-metal sheen: a light sweep across the button face on hover, in the
   site's own orange/blue accent colors - a lightweight CSS stand-in for the
   shader-based "liquid metal button" look, without a WebGL dependency and
   without breaking the static-HTML pages it needs to run on. */
.animated-border::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255,255,255,0.4) 48%,
    rgba(255,144,90,0.5) 50%,
    rgba(120,175,255,0.4) 52%,
    transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
}
.animated-border:hover::after {
  animation: liquidSheen .9s cubic-bezier(.3,.6,.2,1) both;
}
@keyframes liquidSheen {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
  .animated-border:hover::after { animation: none; }
}
.animated-border::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--border-angle),
    rgba(255,90,54,0.95), rgba(90,150,255,0.85) 30%,
    rgba(255,255,255,0.25) 50%, rgba(90,150,255,0.85) 65%,
    rgba(255,90,54,0.95) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderSpin 6s linear infinite;
  pointer-events: none;
}
@keyframes borderSpin { to { --border-angle: 360deg; } }

.animated-border-hover::before { opacity: 0; transition: opacity .35s ease; }
.animated-border-hover:hover::before,
.animated-border-hover:focus-visible::before { opacity: 1; }

/* ---------- ombre wash (hero only) ---------- */
.ombre-wash {
  background:
    linear-gradient(155deg, rgba(255,90,54,0.16) 0%, transparent 38%, rgba(8,8,9,0.55) 75%, rgba(5,5,6,0.92) 100%),
    linear-gradient(205deg, rgba(120,175,255,0.14) 0%, transparent 38%);
}

/* ---------- ambient diagonal beams (site-wide, subtle) ---------- */
#ambientBeams { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.beam-shaft {
  position: absolute;
  width: 10px;
  height: 175vh;
  top: -20vh;
  filter: blur(50px);
  mix-blend-mode: screen;
  opacity: 0.55;
}
.beam-shaft.orange {
  left: 8%;
  background: linear-gradient(180deg, transparent, rgba(255,120,45,0.9) 35%, rgba(255,170,90,0.55) 55%, transparent 90%);
  transform: rotate(18deg);
}
.beam-shaft.blue {
  right: 10%;
  background: linear-gradient(180deg, transparent, rgba(90,150,255,0.85) 40%, rgba(140,190,255,0.5) 60%, transparent 92%);
  transform: rotate(-16deg);
}

/* ---------- edge vignette (subtle color at the far left/right edges only) ---------- */
/* Hidden over the hero on purpose - it only fades in once the hero section has
   scrolled out of view (toggled via .is-visible, see the IntersectionObserver
   near the bottom of the page), so there's no seam/border visible in the hero. */
#edgeVignette {
  position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}
#edgeVignette.is-visible { opacity: 1; }
#edgeVignette::before,
#edgeVignette::after {
  content: "";
  position: absolute;
  top: -10%;
  height: 120%;
  width: 34vw;
  max-width: 480px;
  mix-blend-mode: screen;
}
#edgeVignette::before {
  left: -16vw;
  background: radial-gradient(closest-side, rgba(255,120,45,0.16), rgba(255,120,45,0.05) 55%, transparent 75%);
  animation: edgeGlowDriftLeft 8s ease-in-out infinite alternate;
}
#edgeVignette::after {
  right: -16vw;
  background: radial-gradient(closest-side, rgba(90,150,255,0.16), rgba(90,150,255,0.05) 55%, transparent 75%);
  animation: edgeGlowDriftRight 9.5s ease-in-out infinite alternate;
}
@keyframes edgeGlowDriftLeft {
  0% { transform: translateY(-20%) scale(0.85); opacity: 0.5; }
  100% { transform: translateY(20%) scale(1.25); opacity: 1; }
}
@keyframes edgeGlowDriftRight {
  0% { transform: translateY(20%) scale(1.25); opacity: 1; }
  100% { transform: translateY(-20%) scale(0.85); opacity: 0.5; }
}
@media (max-width: 640px) {
  #edgeVignette::before, #edgeVignette::after { width: 58vw; }
}
@media (prefers-reduced-motion: reduce) {
  #edgeVignette { transition: none; }
  #edgeVignette::before, #edgeVignette::after { animation: none; }
}

/* localized beam accent used on focal glass cards */
.beam-card { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); }
.beam-card::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -20%;
  width: 46%;
  height: 220%;
  background: linear-gradient(180deg, transparent, rgba(255,120,45,0.5) 45%, rgba(255,170,90,0.28) 58%, transparent 85%);
  transform: rotate(16deg);
  filter: blur(22px);
  z-index: 0;
  pointer-events: none;
}
.beam-card.beam-blue::after {
  background: linear-gradient(180deg, transparent, rgba(90,150,255,0.5) 45%, rgba(140,190,255,0.28) 58%, transparent 85%);
  left: auto;
  right: -20%;
  transform: rotate(-16deg);
}
.beam-card > * { position: relative; z-index: 1; }

/* ---------- technology ecosystem marquee ---------- */
.marquee-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.marquee-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  animation: marqueeLeft 32s linear infinite;
}
.marquee-row.reverse { animation-name: marqueeRight; animation-duration: 38s; }
@keyframes marqueeLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marqueeRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.marquee-tag {
  display: inline-flex; align-items: center;
  white-space: nowrap;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(245,244,240,0.75);
  font-size: 0.85rem; font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-row { animation: none !important; }
}

/* ---------- video mask for circles ---------- */
.video-feather {
  -webkit-mask-image: radial-gradient(circle, black 78%, transparent 100%);
  mask-image: radial-gradient(circle, black 78%, transparent 100%);
}

/* ---------- nav pill (icon over label) + attached fingerprint ---------- */
.nav-pill {
  background: #0d0d0e;
  border: 1px solid rgba(255,255,255,.1);
  position: relative;
}
.nav-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  width: 66px; height: 100%;
  color: #8a8a89;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  transition: color .25s ease;
  position: relative;
  cursor: pointer;
}
.nav-tab svg { width: 20px; height: 20px; }
.nav-tab.active { color: #f5f4f0; }

:root {
  --fp-c: #ff5a36;
  --fp-c-dim: rgba(255,90,54,0.25);
}
.fp-wrap { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.fp-halo {
  position: absolute; inset: -4px;
  border-radius: 9999px;
  background: radial-gradient(circle, var(--fp-c-dim) 0%, transparent 70%);
  animation: fpBreathe 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fpBreathe {
  0%, 100% { transform: scale(0.92); opacity: 0.55; }
  50% { transform: scale(1.12); opacity: 0.95; }
}
.fp-ring {
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: conic-gradient(var(--fp-c), rgba(255,255,255,0.15) 40%, var(--fp-c) 100%);
  -webkit-mask-image: radial-gradient(closest-side, transparent 0 90%, black 93% 100%);
  mask-image: radial-gradient(closest-side, transparent 0 90%, black 93% 100%);
  animation: fpSpin 3s linear infinite;
}
@keyframes fpSpin { to { transform: rotate(360deg); } }
.fp-core {
  position: absolute; inset: 4px;
  border-radius: 9999px;
  background: #101012;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.fp-icon { position: absolute; width: 23px; height: 23px; }
.fp-icon.base { color: #9a9a98; opacity: 0.55; }
.fp-icon.accent {
  color: var(--fp-c);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 0 6px var(--fp-c));
  animation: fpIconGlow 2.8s ease-in-out infinite;
}
@keyframes fpIconGlow {
  0%, 100% { clip-path: inset(100% 0 0 0); opacity: 0; }
  50% { clip-path: inset(0% 0 0 0); opacity: 1; }
}
.fp-core.scanning .fp-icon.accent,
.fp-core.scanned .fp-icon.accent { clip-path: inset(0% 0 0 0); animation: none; }
.fp-sweep {
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--fp-c), transparent);
  box-shadow: 0 0 10px 1px var(--fp-c);
  opacity: 0;
  transform: translateY(0%);
}
.fp-core.scanning .fp-sweep {
  animation: fpSweep 1s cubic-bezier(.4,0,.2,1);
}
@keyframes fpSweep {
  0% { opacity: 0; transform: translateY(0%); }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateY(4600%); }
}
.fp-core.scanned { box-shadow: 0 0 0 0 var(--fp-c); animation: fpPulse .6s ease-out; }
@keyframes fpPulse {
  0% { box-shadow: 0 0 0 0 var(--fp-c-dim); }
  100% { box-shadow: 0 0 0 22px rgba(255,90,54,0); }
}

/* ---------- gallery card (narrow portrait, full-bleed crop to head) ---------- */
.art-card { transition: transform .35s ease; }
.art-card:hover { transform: translateY(-4px); }
.art-card video, .art-card img {
  transition: filter .5s ease, transform .6s ease;
}
.art-card:hover video { transform: scale(1.06); }
.art-card.sold video, .art-card.sold img { filter: grayscale(1) saturate(0) brightness(0.5) !important; transform: none !important; }
.rating-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.07) 60%, rgba(255,255,255,0.03));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: #f5f4f0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  font-size: 0.7rem; font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
}
.rating-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.2px;
  background: conic-gradient(from var(--border-angle),
    rgba(255,90,54,0.95), rgba(90,150,255,0.85) 30%,
    rgba(255,255,255,0.25) 50%, rgba(90,150,255,0.85) 65%,
    rgba(255,90,54,0.95) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderSpin 6s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .rating-pill::before { animation: none; }
}
.rating-pill-lg {
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 1.15rem;
  padding: 0.85rem 1rem;
}

/* ---------- collection: focus carousel (all breakpoints) ---------- */
.gallery-track {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 20px 0 28px;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track { scrollbar-width: none; }
.gallery-spacer { flex: 0 0 auto; width: 11vw; }

.gallery-card {
  flex: 0 0 auto;
  width: 78vw;
  scroll-snap-align: center;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.gallery-card.active { opacity: 1; }

.gallery-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}
@media (min-width: 640px) {
  .gallery-track { gap: 22px; }
  .gallery-spacer { width: calc(50vw - 136px); }
  .gallery-card { width: 250px; }
  .gallery-card-media { aspect-ratio: auto; height: 312px; border-radius: 1.75rem; }
}
@media (min-width: 1024px) {
  .gallery-track { gap: 26px; }
  .gallery-spacer { width: calc(50vw - 190px); }
  .gallery-card { width: 300px; }
  .gallery-card-media { height: 372px; }
}
.gallery-card-media video, .gallery-card-media img { width: 100%; height: 100%; object-fit: cover; }

.gallery-card-info { padding-top: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gallery-card-info .name { font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; margin: 0; color: #f5f4f0; }
.gallery-card-info .price { color: #9a9a98; font-size: 0.92rem; margin: 0; white-space: nowrap; }

.gallery-customize-btn {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 0.7rem 1rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #f5f4f0;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.gallery-customize-btn:hover { transform: translateY(-1px); }
.gallery-customize-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--border-angle),
    rgba(255,90,54,0.95), rgba(90,150,255,0.85) 30%,
    rgba(255,255,255,0.3) 50%, rgba(90,150,255,0.85) 65%,
    rgba(255,90,54,0.95) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderSpin 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .gallery-customize-btn::before { animation: none; }
  .gallery-card { transition: none; }
}

.gallery-nav-btn {
  width: 46px; height: 46px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #f5f4f0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.gallery-nav-btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
#processTimeline .reveal { position: relative; z-index: 5; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- build form ---------- */
.section-chip {
  padding: 0.5rem 1rem; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #9a9a98; font-size: 0.8rem; font-weight: 600;
  transition: all .2s ease; cursor: pointer;
}
.section-chip.selected { background: rgba(255,90,54,0.18); border-color: rgba(255,90,54,0.5); color: #f5f4f0; }
.section-chip.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.color-swatch {
  width: 32px; height: 32px; border-radius: 9999px;
  border: 2px solid rgba(255,255,255,0.15);
  position: relative; cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.selected { border-color: #f5f4f0; }
.color-swatch.selected::after {
  content: "✓"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.8rem; text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.form-input {
  width: 100%; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: #f5f4f0; font-size: 0.875rem;
  padding: 0.75rem 1.1rem; border-radius: 9999px;
  outline: none; transition: border-color .2s ease;
}
.form-input::placeholder { color: #6b6b6a; }
.form-input:focus { border-color: rgba(255,90,54,0.5); }
textarea.form-input { border-radius: 1.25rem; resize: vertical; min-height: 4.5rem; }
.form-label { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #9a9a98; font-weight: 600; margin-bottom: 0.5rem; }
.pill-select {
  padding: 0.5rem 1.1rem; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #9a9a98; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: all .2s ease;
}
.pill-select.selected { background: rgba(255,90,54,0.18); border-color: rgba(255,90,54,0.5); color: #f5f4f0; }
.remove-row {
  width: 34px; height: 34px; border-radius: 9999px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  color: #9a9a98; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; transition: all .2s ease;
}
.remove-row:hover { background: rgba(255,90,54,0.18); border-color: rgba(255,90,54,0.5); color: #f5f4f0; }

/* ---------- technology ecosystem: sound wave rings ---------- */
.sound-wave {
  position: absolute; inset: 0;
  border-radius: 9999px;
  border: 1.5px solid rgba(255,90,54,0.6);
  animation: soundWavePulse 3s ease-out infinite;
}
@keyframes soundWavePulse {
  0% { transform: scale(1); opacity: 0.75; border-color: rgba(255,90,54,0.6); }
  100% { transform: scale(1.9); opacity: 0; border-color: rgba(90,150,255,0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .sound-wave { animation: none; opacity: 0; }
}

/* ---------- who we are: scroll-lit paragraph ---------- */
.ww-word { color: #6b6b6a; transition: color .35s ease; }
.ww-word.lit { color: #f5f4f0; }

/* ---------- pricing ---------- */
.pricing-card {
  position: relative;
  background: rgba(255,255,255,0.02);
  box-shadow: var(--elev-1);
  transition: border-color .3s ease, transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.pricing-check {
  width: 16px; height: 16px; border-radius: 9999px; flex-shrink: 0;
  background: rgba(255,90,54,0.16); color: #ff5a36;
  display: flex; align-items: center; justify-content: center;
}
.pricing-card:hover {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}
@media (prefers-reduced-motion: reduce) {
  .pricing-card { transition: none; }
  .pricing-card:hover { transform: none; }
}
.pricing-banner { position: relative; overflow: hidden; background: #101012; }
.pricing-banner::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg,
    rgba(90,150,255,0.45) 0%, rgba(90,150,255,0.45) 50%,
    rgba(120,175,255,0.32) 70%, rgba(255,90,54,0.32) 85%,
    rgba(90,150,255,0.45) 100%);
  filter: blur(60px);
  animation: pricingBannerSpin 14s linear infinite;
}
.pricing-banner > * { position: relative; z-index: 1; }
@keyframes pricingBannerSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pricing-banner::before { animation: none; }
}

/* ---------- how we work: scroll-filled process timeline ---------- */
.process-line-track {
  position: absolute; width: 2px;
  background: rgba(255,255,255,0.08);
  z-index: 0;
}
.process-line-fill {
  position: absolute; width: 2px; height: 0;
  background: linear-gradient(180deg, #ff5a36, #ffb27a);
  box-shadow: 0 0 10px 1px rgba(255,90,54,0.6);
  z-index: 1;
  transition: height .08s linear;
}
.process-dot {
  width: 26px; height: 26px; border-radius: 9999px;
  background: #101012;
  border: 2px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  transition: background .4s ease, border-color .4s ease, transform .4s ease;
  position: relative; z-index: 10; isolation: isolate;
}
.process-dot .dot-check {
  width: 13px; height: 13px; color: #0a0a0b;
  opacity: 0; transform: scale(0.4);
  transition: opacity .3s ease, transform .3s ease;
  position: relative; z-index: 2;
}
.process-dot.done {
  background: linear-gradient(135deg, #ff5a36, #ff2d82 55%, #5a96ff);
  border-color: transparent;
  transform: scale(1.15);
  animation: dotPop .5s cubic-bezier(.34,1.56,.64,1);
}
.process-dot.done .dot-check { opacity: 1; transform: scale(1); }
@keyframes dotPop {
  0% { transform: scale(0.6); }
  55% { transform: scale(1.32); }
  100% { transform: scale(1.15); }
}
.process-dot.done::before,
.process-dot.done::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 9999px;
  border: 1.5px solid rgba(255,90,54,0.55);
  z-index: 0;
  pointer-events: none;
  animation: dotRipple 1.8s ease-out infinite;
}
.process-dot.done::after { animation-delay: 0.6s; border-color: rgba(90,150,255,0.5); }
@keyframes dotRipple {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .process-dot.done, .process-dot.done::before, .process-dot.done::after { animation: none !important; }
}
.process-icon {
  width: 60px; height: 60px; border-radius: 1.25rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: #f5f4f0; flex-shrink: 0;
}
.process-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.3rem 0.65rem; border-radius: 0.6rem;
  background: rgba(255,255,255,0.08);
  color: #f5f4f0; font-weight: 700; font-size: 0.85rem;
}
/* mobile: hide icon+badge, keep only the line and checkmark dot */
.process-icon-badge { display: none; }
@media (min-width: 768px) {
  .process-icon-badge { display: flex; }
}

/* ---------- top promo bar ---------- */
#promoBar {
  position: sticky; top: 0; z-index: 40;
  width: 100%;
  height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: rgba(10,10,11,0.5);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
#promoBar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #ff5a36, #5a96ff, transparent);
  background-size: 200% 100%;
  animation: promoLineSweep 5s linear infinite;
}
@keyframes promoLineSweep {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.promo-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 64px;
  z-index: 5;
  pointer-events: none;
}
.promo-fade-left { left: 0; background: linear-gradient(90deg, #0a0a0b 0%, rgba(10,10,11,0) 100%); }
.promo-fade-right { right: 0; background: linear-gradient(270deg, #0a0a0b 0%, rgba(10,10,11,0) 100%); }
.promo-track { display: flex; align-items: center; }
.promo-item {
  display: inline-flex; align-items: center;
  color: #f5f4f0; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
  gap: 0.5rem; padding: 0 0.6rem;
}
#promoBar svg { width: 13px; height: 13px; color: #ff5a36; flex-shrink: 0; }

/* Desktop/tablet: the sentence fits on one line already, so it just sits
   centered and still - only the repeated copy (needed for the mobile
   marquee loop) is hidden. */
.promo-item-repeat { display: none; }

/* Mobile: the sentence is too long for one line at this width, and
   wrapping it wrecked the bar's height and squished it - scroll it as a
   single-line marquee instead, so the whole sentence is always readable. */
@media (max-width: 639px) {
  #promoBar { justify-content: flex-start; }
  .promo-track { width: max-content; animation: marqueeLeft 14s linear infinite; }
  .promo-item-repeat { display: inline-flex; }
}
@media (max-width: 639px) and (prefers-reduced-motion: reduce) {
  .promo-track { animation: none; }
  .promo-item-repeat { display: none; }
}

input[type="text"], select { appearance: none; }
::-webkit-scrollbar { height: 8px; }

@media (prefers-reduced-motion: reduce) {
  .animated-border::before, .fp-ring, .fp-halo, .fp-icon.accent { animation: none !important; }
}