/* Penumbra Codex v4 — cinematic Awwwards lock */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

body.cx {
  --gold: #6bff4d;
  --gold2: #b8ff9a;
  --gold3: #3db82e;
  --void: #050505;
  --ink: #050505;
  --line: rgba(107, 255, 77, 0.22);
  --glass: rgba(5, 5, 5, 0.42);
  --bone: #f2f4f0;
  --mist: rgba(242, 244, 240, 0.58);
  --paper: #050505;
  --sheet: #0e0f0c;
  --accent: #6bff4d;
  --venom: #6bff4d;
  --fang: #f2f4f0;
  --sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --display: "Cormorant Garamond", Palatino, "Times New Roman", serif;
  background: #050505;
  color: #f2f4f0;
  font-family: var(--sans);
}
body.cx .container { width: min(1320px, calc(100% - 2.4rem)); }
body.cx .float-stack,
body.cx .m-dock { display: none !important; }

/* ——— NAV ——— */
body.cx .nav { position: fixed; inset: 0 0 auto; z-index: 960; }
body.cx .nav-shell {
  background: linear-gradient(180deg, rgba(10, 9, 8, .88) 0%, rgba(10, 9, 8, .35) 70%, transparent);
  border-bottom: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.cx .nav-inner {
  width: min(1320px, calc(100% - 2.4rem));
  height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
body.cx .logo { justify-self: start; }
body.cx .nav-links {
  display: flex;
  gap: 1.75rem;
  justify-self: center;
}
body.cx .nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
body.cx .logo-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  isolation: isolate;
  background: #0a0908;
  border: 1px solid rgba(244, 236, 227, .35);
  flex-shrink: 0;
  color: #f4ece3;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
}
body.cx .logo-mark::before {
  content: "P";
  position: relative;
  z-index: 1;
  color: #f4ece3;
  background: none;
  -webkit-text-fill-color: #f4ece3;
  animation: none;
}
body.cx .logo-mark::after { display: none; }
body.cx .logo-text {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f4ece3;
  font-weight: 600;
  line-height: 1.05;
}
body.cx .logo-text em {
  display: block;
  font-family: var(--sans);
  font-size: 0.52rem;
  letter-spacing: 0.36em;
  color: rgba(244, 236, 227, .5);
  font-style: normal;
  font-weight: 500;
  margin-top: 0.2rem;
}
body.cx .nav-link {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 236, 227, .62);
  position: relative;
}
body.cx .nav-link:hover { color: #f4ece3; }
body.cx .nav-link.active { color: #f4ece3; }
body.cx .nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -0.55rem;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
  box-shadow: none;
}
body.cx .nav-link.active span { box-shadow: none; }
body.cx .nav-phone { display: none !important; }
body.cx .nav-ig,
body.cx .nav-wa {
  display: grid !important;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(244, 236, 227, .28);
  color: #f4ece3;
  background: transparent;
  flex-shrink: 0;
  transition: border-color .25s, background .25s, color .25s;
}
body.cx .nav-ig:hover,
body.cx .nav-wa:hover {
  background: #f4ece3;
  color: #0a0908;
  border-color: #f4ece3;
}
body.cx .nav-social.cx-buzz {
  animation: cxBuzz 2.1s ease-in-out infinite;
  transform-origin: center;
}
@keyframes cxBuzz {
  0%, 62%, 100% { transform: rotate(0deg) translate(0,0) scale(1); }
  64% { transform: rotate(-16deg) translate(-1px, 1px) scale(1.1); }
  67% { transform: rotate(14deg) translate(1px, -1px) scale(1.1); }
  70% { transform: rotate(-12deg) translate(-1px, 0) scale(1.08); }
  73% { transform: rotate(10deg) translate(1px, 1px) scale(1.08); }
  76% { transform: rotate(-8deg) translate(0, -1px) scale(1.05); }
  80% { transform: rotate(0deg) translate(0,0) scale(1); }
}
body.cx .nav-cta,
body.cx .cx-demo {
  border-radius: 999px !important;
  background: #6bff4d !important;
  color: #050505 !important;
  border: 0 !important;
  box-shadow: 0 0 24px rgba(107, 255, 77, .25) !important;
  padding: 0.78rem 1.2rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  font-size: 0.62rem !important;
  font-weight: 700;
  transition: .35s var(--ease, cubic-bezier(.22,1,.36,1));
}
body.cx .nav-cta:hover,
body.cx .cx-demo:hover {
  background: #b8ff9a !important;
  color: #050505 !important;
  box-shadow: 0 0 36px rgba(107, 255, 77, .4) !important;
}

/* ——— BUTTONS ——— */
body.cx .btn {
  border-radius: 999px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.95rem 1.45rem;
}
body.cx .btn-primary,
body.cx .cx-fill {
  background: #6bff4d !important;
  color: #050505 !important;
  border: 0 !important;
  box-shadow: 0 0 28px rgba(107, 255, 77, .28) !important;
}
body.cx .btn-primary:hover {
  filter: none;
  background: #b8ff9a !important;
  box-shadow: 0 0 40px rgba(107, 255, 77, .4) !important;
}
body.cx .btn-ghost,
body.cx .cx-ghost {
  border: 1px solid rgba(107, 255, 77, .45) !important;
  color: #f2f4f0 !important;
  background: transparent !important;
  backdrop-filter: none;
}
body.cx .btn-ghost:hover {
  border-color: #6bff4d !important;
  color: #6bff4d !important;
  box-shadow: 0 0 20px rgba(107, 255, 77, .2);
}
body.cx .hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; margin-top: 1.6rem; }

.cx-kicker {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-shadow: 0 0 24px rgba(201,164,92,.35);
}

.cx-kicker .cx-kicker-sep {
  margin: 0 .55em 0 .5em;
  opacity: .55;
}

.cx-kicker .cx-kicker-n {
  font-variant-numeric: tabular-nums;
}

/* ——— HERO ——— */
.cx-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(var(--nav, 84px) + 1.5rem) 0 4rem;
  overflow: hidden;
  background: #000;
}
.cx-hero-bg { position: absolute; inset: 0; z-index: 0; }
.cx-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 68% center;
  /* no filter — keep photo quality intact */
}
.cx-hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 55% 70% at 72% 48%, rgba(201,164,92,.18), transparent 60%),
    linear-gradient(90deg, #000 8%, rgba(0,0,0,.78) 28%, rgba(0,0,0,.28) 52%, transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 22%, transparent 70%, rgba(0,0,0,.75) 100%);
  pointer-events: none;
}
.cx-hero-glow {
  position: absolute;
  width: 42vw; height: 42vw;
  right: 8%; top: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,164,92,.22), transparent 68%);
  filter: blur(40px);
  z-index: 1;
  pointer-events: none;
  animation: cxPulse 7s ease-in-out infinite alternate;
}
@keyframes cxPulse {
  from { opacity: .55; transform: scale(1); }
  to { opacity: 1; transform: scale(1.08); }
}
.cx-social-rail {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: none;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.cx-social-rail::before,
.cx-social-rail::after {
  content: "";
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
}
.cx-social-rail a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid rgba(201,164,92,.35);
  color: var(--gold2);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  transition: .3s;
}
.cx-social-rail a:hover {
  background: var(--gold);
  color: #111;
  box-shadow: 0 0 20px rgba(201,164,92,.45);
}
/* Only show once the centered 1320px container leaves a real gutter,
   otherwise the rail lands on top of the hero headline */
@media (min-width: 1520px) {
  .cx-social-rail { display: flex; }
}

.cx-hero .container,
.cx-hero-grid {
  position: relative; z-index: 2;
  display: grid; gap: 1.8rem;
}
@media (min-width: 981px) {
  .cx-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(240px, .55fr);
    align-items: center;
  }
  .home-hero .cx-hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.46fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.2rem);
    width: min(1320px, calc(100% - 2.4rem));
    max-width: none;
  }
  .home-hero.home-stage .cx-hero-grid {
    grid-template-columns: 1fr;
    align-items: center;
  }
  .home-hero .page-hero-copy {
    max-width: 38rem;
  }
}
@media (max-width: 980px) {
  /* On phones the photo sits behind the copy, so darken it much harder */
  /* Text stays legible up top while the lower art keeps its gold detail */
  .home-hero .cx-hero-veil {
    background:
      radial-gradient(ellipse 85% 50% at 72% 62%, rgba(201,164,92,.24), transparent 70%),
      linear-gradient(180deg, rgba(4,4,6,.84) 0%, rgba(4,4,6,.64) 30%, rgba(4,4,6,.3) 58%, rgba(4,4,6,.88) 100%);
  }
  .home-hero .cx-hero-bg img {
    object-position: 72% 34%;
    filter: saturate(1.06) contrast(1.05);
  }
  /* the veil is lighter now, so the copy carries its own scrim */
  .home-hero h1,
  .home-hero .cx-kicker,
  .home-hero .page-hero-copy > p {
    text-shadow: 0 2px 18px rgba(0,0,0,.75);
  }
  .home-hero .cx-trust {
    width: auto;
    max-width: none;
    margin: 1.2rem max(1.15rem, env(safe-area-inset-right)) 0 max(1.15rem, env(safe-area-inset-left));
  }
}
.cx-hero h1,
.cx-hero .headline {
  font-family: var(--display);
  font-size: clamp(3rem, 7.2vw, 5.8rem);
  line-height: 0.9;
  max-width: 11.5ch;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: 0 20px 60px rgba(0,0,0,.65);
}
.cx-hero h1 em,
.cx-hero .headline em {
  color: var(--gold2);
  font-style: italic;
  font-weight: 500;
  text-shadow: 0 0 40px rgba(201,164,92,.55), 0 12px 40px rgba(0,0,0,.5);
}
.cx-hero .lede {
  max-width: 34rem;
  color: var(--mist);
  font-size: 1.02rem;
  line-height: 1.65;
  margin-top: 1.1rem;
}
.cx-note {
  margin-top: 1.15rem;
  color: rgba(244,239,230,.55);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

/* glass stats */
.cx-glass {
  justify-self: end;
  width: min(260px, 100%);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(20,18,14,.72), rgba(6,6,8,.55));
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  padding: 1.35rem 1.3rem 1.2rem;
  box-shadow:
    0 30px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(240,217,160,.12),
    0 0 40px rgba(201,164,92,.08);
}
.cx-glass li {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(201,164,92,.18);
  display: grid;
  gap: 0.2rem;
}
.cx-glass li:last-child { border-bottom: 0; padding-bottom: 0.2rem; }
.cx-glass strong,
.cx-glass .cx-count {
  font-family: var(--display);
  font-size: 2.65rem !important;
  color: #fff !important;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(240,217,160,.35);
}
.cx-glass .cx-count {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline;
  gap: 0.02em;
  flex-wrap: nowrap;
}
.cx-glass .cx-count-n,
.cx-glass .cx-count-sfx {
  display: inline !important;
  font-family: var(--display) !important;
  font-size: 2.65rem !important;
  color: #fff !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  vertical-align: baseline !important;
  font-variant-numeric: tabular-nums;
}
.cx-glass .cx-count-n {
  min-width: 2.6ch;
}
.cx-glass li > span[data-i18n],
.cx-glass .cx-kpi-label {
  font-size: 0.7rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244,239,230,.78) !important;
  font-family: var(--sans);
  font-weight: 600;
  white-space: normal;
}

/* ——— GLITCH COUNT-UP ——— */
.cx-count-n,
.cx-count-sfx {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
  line-height: inherit;
  vertical-align: baseline;
}
.cx-count.cx-glitching {
  animation: cxCountGlitch .38s steps(2, end) infinite;
  text-shadow:
    -1px 0 #ff3b5c,
    1px 0 #4de8c2,
    0 0 14px rgba(201,164,92,.5);
}
.cx-count.cx-glitching .cx-count-n {
  color: var(--gold2) !important;
}
@keyframes cxCountGlitch {
  0% { transform: translate(0); filter: none; }
  25% { transform: translate(-1px, 1px) skewX(-2deg); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, 0); }
  100% { transform: translate(0); }
}
.cx-count.cx-done {
  animation: cxCountSettle .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cxCountSettle {
  from { filter: brightness(1.4); text-shadow: 0 0 20px rgba(201,164,92,.6); }
  to { filter: none; text-shadow: none; }
}

.cx-feats { display: grid; gap: 1.1rem; max-width: 240px; justify-self: end; }
.cx-feats li { display: grid; gap: 0.2rem; font-size: 0.86rem; color: var(--mist); }
.cx-feats strong {
  color: var(--gold2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 700;
}
.cx-feats.four {
  max-width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem 1.5rem;
}
.cx-quote {
  justify-self: end;
  width: min(360px, 100%);
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(20px);
  padding: 1.45rem 1.4rem;
  box-shadow: 0 24px 50px rgba(0,0,0,.4), 0 0 40px rgba(201,164,92,.08);
}
.cx-quote p {
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.3;
  color: #fff;
}
.cx-quote small {
  display: block;
  margin-top: 1.1rem;
  color: var(--gold2);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
}
.cx-checks { display: grid; gap: 0.55rem; margin-top: 0.9rem; }
.cx-checks li::before {
  content: "✓";
  color: var(--gold);
  margin-right: 0.5rem;
  text-shadow: 0 0 10px rgba(201,164,92,.5);
}

/* ——— BRANDS ——— */
.cx-brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2.2rem;
  padding: 1.35rem 0;
  margin-top: 0.5rem;
  border-block: 1px solid rgba(201,164,92,.2);
  color: rgba(244,239,230,.42);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
}
.cx-brands b {
  color: var(--gold);
  margin-right: 0.4rem;
  letter-spacing: 0.22em;
}
.cx-brands span {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  color: rgba(244,239,230,.55);
  font-weight: 500;
}

/* Narrow screens can't fit the row, so it scrolls sideways instead of wrapping */
@media (max-width: 860px) {
  .cx-brands {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 1.5rem;
    mask-image: linear-gradient(90deg, #000 78%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent);
  }
  .cx-brands::-webkit-scrollbar { display: none; }
  .cx-brands b { flex: 0 0 auto; }
  .cx-brands span {
    flex: 0 0 auto;
    font-size: 0.95rem;
  }
}

/* ——— VALUES ——— */
.cx-values-block {
  display: grid;
  gap: 2rem;
  padding: 3.2rem 0 1rem;
}
@media (min-width: 980px) {
  .cx-values-block {
    grid-template-columns: 0.85fr 1.4fr;
    align-items: end;
    gap: 2.5rem;
  }
}
.cx-values-head { max-width: 28rem; margin: 0; }
.cx-values-head .headline {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 0.95;
  color: var(--ink);
  max-width: 12ch;
}
.cx-values-head .headline em {
  color: var(--accent);
  font-style: italic;
  text-shadow: none;
}
.cx-values-head .lede {
  margin-top: 1rem;
  color: var(--mist);
  font-size: 0.95rem;
}
.cx-values-head .sig {
  margin-top: 1.4rem;
  color: var(--gold);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.55rem;
  text-shadow: 0 0 20px rgba(201,164,92,.35);
}
.cx-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}
.cx-value {
  border: 1px solid var(--line);
  background: rgba(8,8,10,.65);
  min-height: 320px;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  transition: border-color .4s, transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s;
}
.cx-value img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
  transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .4s;
}
.cx-value::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 15%, rgba(0,0,0,.55) 55%, #000 95%);
}
.cx-value:hover {
  border-color: rgba(201,164,92,.75);
  transform: translateY(-8px);
  box-shadow: 0 28px 50px rgba(0,0,0,.5), 0 0 36px rgba(201,164,92,.18);
}
.cx-value:hover img { transform: scale(1.08); opacity: .72; }
/* Pointer-tracked gold spotlight (coords set in app.js) */
.cx-value::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(320px 220px at var(--mx, 50%) var(--my, -20%), rgba(201,164,92,.26), transparent 66%);
  opacity: 0;
  transition: opacity .35s;
}
.cx-value:hover::before { opacity: 1; }
.cx-value h3, .cx-value p, .cx-value span { position: relative; z-index: 1; }
.cx-value h3 {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
  color: #fff;
  font-weight: 700;
}
.cx-value p { color: rgba(244,239,230,.7); font-size: 0.84rem; line-height: 1.45; }
.cx-value .go {
  margin-top: 1rem;
  width: 34px; height: 34px;
  border: 1px solid rgba(201,164,92,.55);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold2);
  font-size: 0.85rem;
  background: rgba(0,0,0,.35);
}

/* ——— BENTO / CARDS ——— */
.cx-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}
.cx-card {
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(18,16,14,.88), rgba(6,6,8,.92));
  backdrop-filter: blur(16px);
  padding: 1.15rem 1.1rem 1.2rem;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color .35s, transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s;
}
.cx-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(480px 240px at var(--mx, 50%) var(--my, -20%), rgba(201,164,92,.16), transparent 62%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.cx-card:hover {
  border-color: rgba(201,164,92,.78);
  transform: translateY(-8px);
  box-shadow: 0 28px 55px rgba(0,0,0,.5), 0 0 40px rgba(201,164,92,.16);
}
.cx-card:hover::before { opacity: 1; }
.cx-card .shot {
  display: block;
  height: 148px;
  margin: 0.6rem 0 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(201,164,92,.22);
  border-radius: 2px;
  background: #0a0a0a;
  box-shadow: inset 0 0 30px rgba(0,0,0,.4);
}
.cx-card .shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.cx-card:hover .shot img { transform: scale(1.07); }
.cx-card .num {
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(201,164,92,.4);
}
.cx-card .tag {
  color: rgba(244,239,230,.4);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 0.2rem;
}
.cx-card h3 {
  font-family: var(--display);
  font-size: 1.45rem;
  margin: 0.45rem 0 0.35rem;
  line-height: 1.08;
  color: #fff;
}
.cx-card p { color: rgba(244,239,230,.6); font-size: 0.86rem; flex: 1; line-height: 1.5; }
.cx-card .more {
  color: var(--gold2);
  font-size: 0.78rem;
  margin-top: 0.85rem;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.cx-card.feat { grid-column: 1 / 3; grid-row: 1 / 3; min-height: 100%; }
.cx-card.feat .shot { height: 240px; }
.cx-card.feat ul { margin: 0.45rem 0 0; color: rgba(244,239,230,.68); font-size: 0.82rem; }
.cx-card.feat ul li { padding: 0.2rem 0; }
.cx-card.feat ul li::before { content: "– "; color: var(--gold); }

/* ——— STATS / CTA ——— */
.cx-stats {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.4rem;
  align-items: center;
  padding: 1.7rem 0 0.5rem;
  border-top: 1px solid rgba(201,164,92,.22);
  margin-top: 2.4rem;
}
.cx-stats h3 {
  color: var(--gold);
  letter-spacing: 0.2em;
  font-size: 0.78rem;
  text-transform: uppercase;
}
.cx-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.9rem; }
.cx-stat-row div { font-size: 0.8rem; color: rgba(244,239,230,.62); }
.cx-stat-row strong {
  display: block;
  color: #fff;
  font-size: 1.25rem;
  font-family: var(--display);
  font-weight: 600;
}
.cx-stat-6 { grid-template-columns: repeat(6, 1fr); }

.cx-cta-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem 1.55rem;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(201,164,92,.14), transparent 50%),
    rgba(8,8,10,.75);
  backdrop-filter: blur(14px);
  margin: 3rem 0 1rem;
  box-shadow: 0 0 50px rgba(201,164,92,.06);
}
.cx-cta-bar p { margin: 0; max-width: 46rem; color: rgba(244,239,230,.82); }
.cx-cta-bar strong { color: #fff; font-size: 1.05rem; }
.cx-cta-bar .btn { white-space: nowrap; }

.cx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.2rem 0 1.5rem;
  align-items: center;
}
.cx-filters a, .cx-filters span {
  border: 1px solid var(--line);
  padding: 0.5rem 0.95rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244,239,230,.68);
  font-weight: 600;
  transition: .3s;
}
.cx-filters .on,
.cx-filters span.on {
  background: linear-gradient(180deg, #f0d9a0, #c9a45c);
  color: #111;
  border-color: var(--gold);
}
.cx-filters .push { margin-left: auto; }

body.cx .project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.05rem;
}
body.cx .project {
  border: 1px solid var(--line);
  background: #08080a;
  overflow: hidden;
  transition: border-color .35s, transform .5s, box-shadow .5s;
}
body.cx .project:hover {
  border-color: rgba(201,164,92,.7);
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0,0,0,.45), 0 0 32px rgba(201,164,92,.12);
}
body.cx .project-shot {
  position: relative;
  overflow: hidden;
  background: #050505;
  aspect-ratio: 16 / 10;
}
body.cx .project-shot img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
body.cx .project:hover .project-shot img { transform: scale(1.04); }
body.cx .project-body {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  padding: 1.1rem 1.15rem 1.2rem;
}
body.cx .project-body h3 { font-family: var(--display); font-size: 1.45rem; color: var(--ink); }
body.cx .project-body a { color: var(--gold2); white-space: nowrap; font-weight: 600; }

.cx-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.7rem;
}
.cx-step {
  border: 1px solid var(--line);
  min-height: 360px;
  padding: 1.05rem 0.9rem 0.95rem;
  display: flex;
  flex-direction: column;
  background: rgba(8,8,10,.7);
  backdrop-filter: blur(10px);
  transition: border-color .35s, transform .45s, box-shadow .45s;
}
.cx-step:hover {
  border-color: rgba(201,164,92,.7);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}
.cx-step .num {
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.6rem;
  text-shadow: 0 0 16px rgba(201,164,92,.35);
}
.cx-step h3 { font-size: 0.95rem; margin: 0.35rem 0; color: var(--ink); }
.cx-step p { color: var(--mist); font-size: 0.8rem; line-height: 1.45; }
.cx-step .thumb {
  height: 140px;
  margin: 0.75rem -0.15rem;
  overflow: hidden;
  border: 1px solid rgba(201,164,92,.2);
}
.cx-step .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .55s;
}
.cx-step:hover .thumb img { transform: scale(1.06); }
.cx-step time {
  color: var(--gold2);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  margin-top: auto;
  font-weight: 600;
}

.cx-blog { display: grid; grid-template-columns: 2.3fr 0.85fr; gap: 1.4rem; }
.cx-blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.95rem; }
body.cx .blog-card {
  border: 1px solid var(--line);
  background: rgba(8,8,10,.85);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  transition: border-color .35s, transform .45s, box-shadow .45s;
}
body.cx .blog-card:hover {
  border-color: rgba(201,164,92,.7);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}
body.cx .blog-card h2,
body.cx .blog-card h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.2;
  color: #fff;
}
.cx-pick {
  border: 1px solid var(--line);
  padding: 1.35rem;
  background: linear-gradient(180deg, rgba(201,164,92,.12), transparent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 240px;
}
.cx-pick h3 { font-family: var(--display); font-size: 1.75rem; color: #fff; }
.cx-pick em { color: var(--gold2); font-style: italic; }
.cx-side {
  border: 1px solid var(--line);
  padding: 1.2rem;
  height: max-content;
  background: rgba(8,8,10,.75);
  backdrop-filter: blur(12px);
  position: sticky;
  top: calc(var(--nav, 84px) + 1rem);
}
.cx-side + .cx-side { margin-top: 0.95rem; }
.cx-side h3 { font-size: 0.9rem; margin-bottom: 0.85rem; color: var(--gold2); letter-spacing: 0.08em; }
.cx-side a {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 0.86rem;
}
.cx-news { display: flex; gap: 0.4rem; margin-top: 0.75rem; }
.cx-news input {
  flex: 1;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.4);
  padding: 0.7rem 0.75rem;
}
.cx-news button {
  width: 46px;
  background: linear-gradient(180deg, #f0d9a0, #c9a45c);
  color: #111;
  font-weight: 700;
}

.cx-contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.cx-contacts a, .cx-contacts div {
  border: 1px solid var(--line);
  padding: 1.2rem 1.1rem;
  background: rgba(8,8,10,.7);
  backdrop-filter: blur(10px);
  transition: border-color .3s, transform .4s, box-shadow .4s;
}
.cx-contacts a:hover {
  border-color: rgba(201,164,92,.7);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.35);
}
.cx-contacts strong {
  display: block;
  color: var(--gold2);
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cx-contacts .go {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 600;
}

.cx-map3 { display: grid; grid-template-columns: 1.3fr .9fr .8fr; gap: 0.9rem; margin-top: 1rem; }
.cx-map, .cx-hours, .cx-cardshot {
  border: 1px solid var(--line);
  min-height: 260px;
  overflow: hidden;
  background: #08080a;
}
.cx-map iframe {
  width: 100%; height: 100%; min-height: 260px; border: 0;
  filter: invert(1) hue-rotate(180deg) saturate(.3) brightness(.75);
}
.cx-hours { padding: 1.35rem; }
.cx-hours h3 { font-family: var(--display); margin-bottom: 0.75rem; font-size: 1.5rem; }
.cx-hours q { display: block; margin-top: 1.2rem; color: var(--gold2); font-style: italic; font-family: var(--display); font-size: 1.15rem; }
.cx-cardshot img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }

body.cx .form {
  border: 1px solid var(--line);
  padding: 1.45rem;
  background: rgba(6,6,8,.72);
  backdrop-filter: blur(22px);
  box-shadow: 0 30px 60px rgba(0,0,0,.4), 0 0 40px rgba(201,164,92,.08);
}
body.cx .form h3 { font-family: var(--display); font-size: 1.85rem; margin-bottom: 0.35rem; color: var(--ink); }
body.cx .form .hint { color: rgba(244,239,230,.55); font-size: 0.86rem; margin-bottom: 1.1rem; }
body.cx .form input,
body.cx .form select,
body.cx .form textarea {
  border: 1px solid rgba(201,164,92,.25);
  background: rgba(0,0,0,.4);
  padding: 0.78rem 0.85rem;
  width: 100%;
}
body.cx .form .lock { margin-top: 0.75rem; font-size: 0.74rem; color: rgba(244,239,230,.45); }

.cx-about { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; }
.cx-who, .cx-vals {
  border: 1px solid var(--line);
  padding: 1.4rem;
  background: rgba(8,8,10,.65);
  backdrop-filter: blur(12px);
}
.cx-who { display: grid; grid-template-columns: 1fr .8fr; gap: 1rem; }
.cx-who img { width: 100%; height: 100%; object-fit: cover; min-height: 200px; }
.cx-valgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.cx-valgrid article {
  border: 1px solid var(--line);
  padding: 1rem;
  background: rgba(0,0,0,.25);
}
.cx-valgrid h4 { color: var(--gold2); margin-bottom: 0.35rem; }
.cx-tech {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.3rem;
  letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem;
  color: rgba(244,239,230,.5);
  margin-top: 0.7rem;
}

body.cx .breadcrumbs { display: none; }
body.cx .section { padding: 2.5rem 0; }
body.cx .section-panel { background: transparent; }
body.cx .footer {
  border-top: 1px solid rgba(247, 248, 246, .12);
  background: #16191c;
  color: #f7f8f6;
}
body.cx .footer-logo .logo-text { color: #f7f8f6; }

/* ——— HOME SECTIONS ——— */
.cx-sec-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}
.cx-sec-head .headline {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.95;
  color: var(--ink);
  max-width: 14ch;
}
.cx-sec-head .headline em {
  color: var(--accent);
  font-style: italic;
  text-shadow: none;
}
.cx-sec-head .lede { margin-top: 0.7rem; color: var(--mist); max-width: 34rem; }
.home-bento { grid-template-columns: repeat(4, 1fr); }
.home-bento .cx-card { grid-column: auto !important; grid-row: auto !important; min-height: 260px; }
.home-bento .cx-card .shot { height: 120px; }
.home-blog { margin-top: 0.4rem; }
body.cx .contact-shell {
  display: grid;
  gap: 1.4rem;
  align-items: start;
}
@media (min-width: 960px) {
  body.cx .contact-shell { grid-template-columns: 1.05fr .95fr; }
}

body.cx .project-hit { display: block; color: inherit; }
body.cx .project-body .more { color: var(--gold2); font-weight: 600; white-space: nowrap; }
body.cx .project-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 980px) {
  body.cx .project-grid { grid-template-columns: 1fr !important; }
  .home-bento { grid-template-columns: 1fr; }
}

/* ——— CAPCUT SCROLL TRANSITIONS ——— */
body.cx .scroll-progress {
  display: block !important;
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  z-index: 200;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold2));
  box-shadow: 0 0 12px rgba(201,164,92,.65);
  pointer-events: none;
}

/* Reveal is JS-driven, so without JS the copy must stay visible. */
html:not(.js) body.cx .reveal,
html:not(.js) .reveal {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
  transition: none !important;
}
@media (scripting: none) {
  body.cx .reveal, .reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }
}
body.cx .reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  filter: none;
  clip-path: none;
  will-change: transform, opacity;
  transition:
    opacity .5s cubic-bezier(.22,1,.36,1),
    transform .55s cubic-bezier(.22,1,.36,1);
}

/* default: fade up — no blur, no clip (those made photos look broken) */
body.cx .reveal:not([data-cut]),
body.cx .reveal[data-cut="up"],
body.cx .reveal[data-cut="left"],
body.cx .reveal[data-cut="right"],
body.cx .reveal[data-cut="zoom"],
body.cx .reveal[data-cut="drop"],
body.cx .reveal[data-cut="whip"] {
  transform: translate3d(0, 24px, 0);
  clip-path: none;
  filter: none;
}
body.cx .reveal.visible:not([data-cut]),
body.cx .reveal[data-cut].visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  clip-path: none;
  filter: none;
}

/* section headline punch */
body.cx .cx-sec-head.reveal,
body.cx .cx-values-head.reveal {
  transform: translate3d(0, 24px, 0);
  clip-path: none;
  filter: none;
}
body.cx .cx-sec-head.reveal.visible,
body.cx .cx-values-head.reveal.visible {
  transform: none;
  clip-path: none;
  filter: none;
}

/* staggered grid — snappy CapCut beat */
body.cx .cx-bento .reveal:nth-child(1),
body.cx .cx-values .reveal:nth-child(1),
body.cx .project-grid .reveal:nth-child(1),
body.cx .cx-steps .reveal:nth-child(1),
body.cx .home-blog .reveal:nth-child(1) { transition-delay: .02s; }
body.cx .cx-bento .reveal:nth-child(2),
body.cx .cx-values .reveal:nth-child(2),
body.cx .project-grid .reveal:nth-child(2),
body.cx .cx-steps .reveal:nth-child(2),
body.cx .home-blog .reveal:nth-child(2) { transition-delay: .07s; }
body.cx .cx-bento .reveal:nth-child(3),
body.cx .cx-values .reveal:nth-child(3),
body.cx .project-grid .reveal:nth-child(3),
body.cx .cx-steps .reveal:nth-child(3),
body.cx .home-blog .reveal:nth-child(3) { transition-delay: .12s; }
body.cx .cx-bento .reveal:nth-child(4),
body.cx .cx-values .reveal:nth-child(4),
body.cx .project-grid .reveal:nth-child(4),
body.cx .cx-steps .reveal:nth-child(4),
body.cx .home-blog .reveal:nth-child(4) { transition-delay: .17s; }
body.cx .cx-bento .reveal:nth-child(5),
body.cx .project-grid .reveal:nth-child(5),
body.cx .cx-steps .reveal:nth-child(5) { transition-delay: .22s; }
body.cx .cx-bento .reveal:nth-child(6),
body.cx .project-grid .reveal:nth-child(6),
body.cx .cx-steps .reveal:nth-child(6) { transition-delay: .27s; }
body.cx .cx-bento .reveal:nth-child(7),
body.cx .project-grid .reveal:nth-child(7) { transition-delay: .32s; }
body.cx .cx-bento .reveal:nth-child(8),
body.cx .project-grid .reveal:nth-child(8) { transition-delay: .37s; }
body.cx .project-grid .reveal:nth-child(n+9) { transition-delay: .4s; }

/* section whip band */
body.cx .section.cx-sec-in {
  animation: none;
}
@keyframes cxSecWhip {
  0% { filter: brightness(1.25); }
  100% { filter: none; }
}

/* gold wipe line across section enter */
body.cx .section {
  position: relative;
}
body.cx .section.cx-sec-in::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold2), transparent);
  animation: cxLineSweep .55s cubic-bezier(.16,1,.3,1) both;
  pointer-events: none;
  z-index: 2;
}
@keyframes cxLineSweep {
  from { transform: scaleX(0); opacity: 1; }
  to { transform: scaleX(1); opacity: .35; }
}

.cx-flash {
  position: fixed; inset: 0; z-index: 500;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(240,217,160,.32), transparent 40%);
  opacity: 0;
  transition: opacity .14s ease-out;
}
.cx-flash.on { opacity: 1; }

/* scroll velocity kick — applied by JS briefly */
body.cx.cx-kick main {
  animation: none;
}
@keyframes cxKick {
  0% { transform: scale(1.012); filter: brightness(1.08); }
  100% { transform: none; filter: none; }
}

body.cx a.cx-cut,
body.cx .cx-cut,
body.cx .project,
body.cx .cx-card,
body.cx .cx-value,
body.cx .btn {
  transition: transform .24s cubic-bezier(.16,1,.3,1), box-shadow .24s, border-color .24s, filter .24s;
}
body.cx .cx-card:active,
body.cx .cx-value:active,
body.cx .project:active,
body.cx .btn:active {
  transform: scale(0.96) !important;
  filter: brightness(1.1);
}

body.cx.cx-enter main {
  animation: none;
}
@keyframes cxWhip {
  from { opacity: 0; transform: translateY(28px) scale(1.03); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: none; }
}

@media (max-width: 980px) {
  body.cx .nav-inner { grid-template-columns: 1fr auto; height: 72px; }
  body.cx .nav-links { display: none; }
  .cx-values, .cx-bento, .cx-steps, .cx-blog, .cx-blog-grid, .cx-contacts,
  .cx-stat-row, .cx-stats, .cx-stat-6, .cx-about, .cx-who, .cx-map3,
  body.cx .project-grid, .home-bento {
    grid-template-columns: 1fr;
  }
  .cx-card.feat { grid-column: auto; grid-row: auto; }
  .cx-feats { justify-self: start; max-width: none; grid-template-columns: 1fr 1fr 1fr; }
  .cx-feats.four { grid-template-columns: 1fr 1fr; }
  .cx-hero { min-height: 92svh; align-items: end; }
  .cx-glass, .cx-quote { justify-self: start; width: 100%; }
  .cx-filters .push { margin-left: 0; }
  .cx-hero h1, .cx-hero .headline {
    font-size: clamp(2.6rem, 11vw, 3.6rem);
    line-height: 0.98;
    max-width: 14ch;
  }
  /* lighter motion on mobile */
  body.cx .reveal { filter: none !important; }
  body.cx .reveal:not([data-cut]),
  body.cx .reveal[data-cut] {
    transform: translate3d(0, 36px, 0);
    clip-path: inset(12% 0 0 0);
  }

  /* ——— COMPACT MOBILE CARDS: ~3–4 per screen ——— */
  body.cx .project-grid {
    gap: 0.55rem !important;
  }
  body.cx .project {
    border-radius: 8px;
  }
  body.cx .project-body {
    padding: 0.45rem 0.65rem 0.55rem !important;
    gap: 0.4rem;
    align-items: center;
  }
  body.cx .project-body h3 {
    font-size: 0.98rem !important;
    line-height: 1.15;
    margin: 0.05rem 0;
  }
  body.cx .project-body p {
    display: none !important;
  }
  body.cx .project-body .tag {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
  }
  body.cx .project-body .more,
  body.cx .project-body a {
    font-size: 0.68rem !important;
  }

  body.cx .blog-card {
    padding: 0.55rem 0.7rem 0.6rem !important;
    border-radius: 8px;
  }
  body.cx .blog-card-top {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.25rem;
  }
  body.cx .blog-pp {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0;
  }
  body.cx .blog-pp img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
    object-fit: cover;
  }
  body.cx .blog-pp-meta {
    display: flex;
    gap: 0.45rem;
    align-items: baseline;
    flex-wrap: wrap;
  }
  body.cx .blog-card .num { font-size: 0.65rem; }
  body.cx .blog-card .tag { font-size: 0.58rem; }
  body.cx .blog-card time { font-size: 0.58rem; }
  body.cx .blog-card h2,
  body.cx .blog-card h3 {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    margin: 0.15rem 0 0.2rem !important;
  }
  body.cx .blog-card p {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
  }
  body.cx .blog-card .more {
    font-size: 0.65rem !important;
    margin-top: 0.35rem !important;
  }

  .cx-step {
    min-height: 0 !important;
    padding: 0.5rem 0.6rem !important;
    border-radius: 8px;
    display: grid !important;
    grid-template-columns: 1fr 88px;
    grid-template-rows: auto auto auto;
    column-gap: 0.65rem;
    align-items: center;
  }
  .cx-step .num {
    font-size: 0.95rem !important;
    grid-column: 1;
    grid-row: 1;
  }
  .cx-step h3 {
    font-size: 0.92rem !important;
    margin: 0 !important;
    grid-column: 1;
    grid-row: 2;
  }
  .cx-step p {
    font-size: 0.68rem !important;
    margin: 0;
    grid-column: 1;
    grid-row: 3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cx-step .thumb {
    grid-column: 2;
    grid-row: 1 / -1;
    width: 88px !important;
    height: 72px !important;
    margin: 0 !important;
    border-radius: 6px;
    overflow: hidden;
    align-self: center;
  }
  .cx-step .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .cx-step time {
    display: none !important;
  }

  .cx-card {
    min-height: 0 !important;
    padding: 0.6rem 0.7rem 0.65rem !important;
  }
  .cx-card .shot {
    height: 110px !important;
    margin: 0.35rem 0 0.4rem !important;
    border-radius: 6px;
    overflow: hidden;
  }
  .cx-card .shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .cx-card h3 { font-size: 1.05rem !important; margin: 0.2rem 0 !important; }
  .cx-card p {
    font-size: 0.72rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .home-bento .cx-card .shot { height: 96px !important; }
  body.cx .project-shot {
    aspect-ratio: 2.15 / 1;
  }
  body.cx .project-shot img {
    height: 100% !important;
    object-fit: cover;
    object-position: center 18%;
  }
  /* Two dense tiles per row read richer than one washed-out full-width card */
  .cx-values { grid-template-columns: 1fr 1fr !important; gap: 0.6rem !important; }
  .cx-value { min-height: 188px !important; padding: 0.85rem !important; }
  .cx-value img { opacity: .62; }
  .cx-value::after { background: linear-gradient(180deg, transparent 8%, rgba(0,0,0,.5) 48%, rgba(0,0,0,.94) 96%); }
  .cx-value h3 { font-size: 0.74rem !important; letter-spacing: 0.1em; }
  .cx-value p { font-size: 0.73rem !important; }
  .cx-value .go { margin-top: 0.6rem; width: 30px; height: 30px; }
  .cx-sec-head { margin-bottom: 0.85rem !important; gap: 0.75rem !important; }
  .cx-sec-head .headline { font-size: clamp(1.55rem, 7vw, 2.1rem) !important; }
  .cx-stat-row { grid-template-columns: 1fr 1fr !important; gap: 0.65rem !important; }
}

/* ——— ECLIPSE ORBIT DOCK (unique FAB) ——— */
.cx-eclipse {
  position: fixed;
  right: max(0.85rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 90;
  width: 64px;
  height: 64px;
  pointer-events: none;
}
.cx-eclipse-core,
.cx-eclipse .cx-sat { pointer-events: auto; }
.cx-eclipse-core {
  position: absolute;
  right: 0; bottom: 0;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 0;
  background:
    radial-gradient(circle at 35% 30%, rgba(240,217,160,.35), transparent 45%),
    linear-gradient(160deg, #1a1610 0%, #050505 70%);
  color: var(--gold2);
  display: grid;
  place-items: center;
  box-shadow:
    0 12px 36px rgba(0,0,0,.55),
    0 0 28px rgba(201,164,92,.22);
  cursor: pointer;
  overflow: visible;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
  isolation: isolate;
}
.cx-eclipse-core::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    from var(--cx-hue, 0deg),
    #ff4d6d,
    #f0d9a0,
    #4ade80,
    #38bdf8,
    #a78bfa,
    #ff4d6d
  );
  z-index: -2;
  animation: cxHueSpin 4s linear infinite;
}
.cx-eclipse-core::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(240,217,160,.28), transparent 45%),
    linear-gradient(160deg, #1a1610 0%, #050505 70%);
  z-index: -1;
}
.cx-eclipse-core:hover {
  box-shadow:
    0 14px 40px rgba(0,0,0,.55),
    0 0 40px rgba(201,164,92,.35);
}
.cx-eclipse-p {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 2;
  background: linear-gradient(
    110deg,
    #fff 0%,
    #f0d9a0 28%,
    #ff4d6d 48%,
    #38bdf8 68%,
    #f0d9a0 88%,
    #fff 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cxPShimmer 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(201,164,92,.45));
}
.cx-eclipse-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(240,217,160,.85);
  border-right-color: rgba(56,189,248,.35);
  border-bottom-color: rgba(255,77,109,.25);
  border-left-color: rgba(167,139,250,.35);
  animation: cxOrbitSpin 2.8s linear infinite;
  pointer-events: none;
}
.cx-eclipse.open .cx-eclipse-ring {
  animation-duration: 0.9s;
  border-top-color: #fff;
}
.cx-eclipse.open .cx-eclipse-core {
  transform: scale(0.92) rotate(45deg);
}
.cx-eclipse.open .cx-eclipse-core::after {
  background: linear-gradient(160deg, #e8d09a, #c9a45c);
}
.cx-eclipse.open .cx-eclipse-p {
  animation: none;
  background: none;
  color: #111;
  -webkit-background-clip: unset;
  background-clip: unset;
  filter: none;
}
@keyframes cxOrbitSpin {
  to { transform: rotate(360deg); }
}
@keyframes cxHueSpin {
  to { --cx-hue: 360deg; transform: rotate(360deg); }
}
@keyframes cxPShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.cx-eclipse-arc {
  position: absolute;
  right: 8px; bottom: 8px;
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 1px dashed rgba(201,164,92,.0);
  pointer-events: none;
  transition: border-color .35s, transform .45s cubic-bezier(.16,1,.3,1);
  transform: scale(0.4);
}
.cx-eclipse.open .cx-eclipse-arc {
  border-color: rgba(201,164,92,.28);
  transform: scale(1);
  box-shadow: inset 0 0 40px rgba(201,164,92,.06);
}

.cx-eclipse-sats {
  position: absolute;
  right: 8px; bottom: 8px;
  width: 150px; height: 150px;
  pointer-events: none;
}
.cx-sat {
  position: absolute;
  right: 5px; bottom: 5px;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold2);
  background: rgba(8,8,10,.88);
  border: 1px solid rgba(201,164,92,.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
  opacity: 0;
  transform: translate(0, 0) scale(0.4);
  transition:
    opacity .28s cubic-bezier(.16,1,.3,1),
    transform .42s cubic-bezier(.16,1,.3,1),
    background .25s, color .25s, border-color .25s;
  pointer-events: none;
}
.cx-sat::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111;
  background: var(--gold2);
  padding: 0.28rem 0.45rem;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  font-weight: 700;
}
.cx-eclipse.open .cx-sat {
  opacity: 1;
  pointer-events: auto;
  transition-delay: calc(var(--i, 0) * 0.045s);
}
/* fan along quarter-circle (NW) */
.cx-eclipse.open .cx-sat:nth-child(1) { transform: translate(-6px, -108px) scale(1); }
.cx-eclipse.open .cx-sat:nth-child(2) { transform: translate(-58px, -92px) scale(1); }
.cx-eclipse.open .cx-sat:nth-child(3) { transform: translate(-96px, -52px) scale(1); }
.cx-eclipse.open .cx-sat:nth-child(4) { transform: translate(-110px, -2px) scale(1); }
.cx-sat:hover {
  background: linear-gradient(160deg, #f0d9a0, #c9a45c);
  color: #111;
  border-color: var(--gold2);
}
.cx-sat:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.cx-sat-g {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
}

@media (max-width: 980px) {
  .cx-sat::after { display: none; }
  .cx-eclipse {
    right: max(0.7rem, env(safe-area-inset-right));
    bottom: max(0.85rem, env(safe-area-inset-bottom));
  }
}

body.pct-post .cx-count[data-prefix="%"],
body.pct-post .cx-glass .cx-count[data-prefix="%"] {
  display: inline-flex !important;
  flex-direction: row-reverse !important;
  align-items: baseline;
}

/* Looping decorations pause while scrolled out of view (toggled from app.js) */
.anim-idle,
.anim-idle::before,
.anim-idle::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .cx-hero-glow, .cx-card, .cx-value, .cx-step, .project,
  body.cx .reveal, body.cx.cx-enter main, body.cx .section.cx-sec-in,
  body.cx.cx-kick main { animation: none !important; transition: none !important; filter: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .cx-flash, body.cx .section.cx-sec-in::after { display: none !important; }
  .cx-eclipse-ring,
  .cx-eclipse-core::before,
  .cx-eclipse-p,
  body.cx .logo-mark::before,
  body.cx .logo-mark::after { animation: none !important; }
  .cx-sat { transition: none !important; }
  body.cx .nav-social.cx-buzz,
  .cx-count.cx-glitching,
  .cx-count.cx-glitching .cx-count-n,
  .cx-marquee-track { animation: none !important; }
  .cookie-banner, .menu-btn i { transition: none !important; }
}

/* Touch devices keep hover styles stuck after a tap, so opt them out. */
@media (hover: none) {
  .cx-card:hover,
  .cx-value:hover,
  .cx-lcard:hover,
  .project:hover,
  .cx-step:hover,
  .blog-card:hover {
    transform: none;
    box-shadow: none;
  }
  .cx-card::before,
  .cx-value::before { opacity: 0 !important; }
}

/* ——— LANG SWITCHER (top 5 flags) ——— */
.cx-lang {
  position: relative;
  z-index: 5;
}
.cx-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 36px;
  padding: 0 0.55rem 0 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(201,164,92,.35);
  background: rgba(8,8,10,.72);
  color: var(--gold2);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: border-color .25s, box-shadow .25s;
}
.cx-lang-toggle:hover,
.cx-lang.open .cx-lang-toggle {
  border-color: rgba(201,164,92,.7);
  box-shadow: 0 0 18px rgba(201,164,92,.18);
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.cx-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 148px;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border: 1px solid rgba(201,164,92,.35);
  background: rgba(8,8,10,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  display: grid;
  gap: 0.15rem;
}
.cx-lang-menu[hidden] { display: none !important; }
.cx-lang-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 0;
  background: transparent;
  color: rgba(244,239,230,.82);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background .2s, color .2s;
}
.cx-lang-menu button::before {
  content: attr(data-flag);
  font-size: 1rem;
}
.cx-lang-menu button:hover,
.cx-lang-menu button[aria-selected="true"] {
  background: rgba(201,164,92,.14);
  color: #fff;
}
body.cx.is-rtl .home-hero .cx-glass { transform: none; }
body.cx.is-rtl .cx-lang-menu { right: auto; left: 0; }
body.cx.is-rtl .cx-eclipse { right: auto; left: max(0.85rem, env(safe-area-inset-left)); }
body.cx.is-rtl .cx-eclipse.open .cx-sat:nth-child(1) { transform: translate(6px, -108px) scale(1); }
body.cx.is-rtl .cx-eclipse.open .cx-sat:nth-child(2) { transform: translate(58px, -92px) scale(1); }
body.cx.is-rtl .cx-eclipse.open .cx-sat:nth-child(3) { transform: translate(96px, -52px) scale(1); }
body.cx.is-rtl .cx-eclipse.open .cx-sat:nth-child(4) { transform: translate(110px, -2px) scale(1); }
@media (max-width: 980px) {
  /* Logo + actions used to exceed the bar and clip the burger */
  body.cx .nav-inner { gap: 0.6rem; }
  body.cx .logo { min-width: 0; flex: 0 1 auto; }
  body.cx .logo-text {
    font-size: 1.05rem;
    white-space: nowrap;
  }
  body.cx .logo-text em { display: none; }
  body.cx .nav-actions { flex: 0 0 auto; gap: 0.5rem; }

  body.cx .nav-phone,
  body.cx .nav-cta { display: none !important; }
  body.cx .nav-ig,
  body.cx .nav-wa {
    display: grid !important;
    width: 34px;
    height: 34px;
  }

  /* Mobile speed: cut expensive paint */
  .cx-hero-glow,
  .cx-hero-veil {
    animation: none !important;
    filter: none !important;
  }
  .cx-hero-glow { opacity: .45; }
  .home-hero .cx-glass.home-kpi,
  .cx-trust,
  .cx-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(8, 8, 10, .88) !important;
  }
  .cx-card .shot img,
  .project-shot img,
  .cx-value img,
  .cx-step .thumb img {
    content-visibility: auto;
    contain-intrinsic-size: 320px 200px;
  }
  body.cx .reveal {
    transition-duration: .28s !important;
  }
  .cx-eclipse-ring,
  .cx-eclipse-core::before {
    animation: none !important;
  }
  .scroll-progress { height: 2px; }
}

@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  body.cx .nav-social.cx-buzz {
    animation-duration: 3.2s;
  }
}
/* ——— SECTOR / REGION LANDING ——— */
.cx-lblock { margin-top: 2.75rem; }
.cx-lblock > h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  color: #fff;
  margin-bottom: 0.35rem;
}
.cx-lblock > p {
  color: rgba(244,239,230,.62);
  font-size: 0.92rem;
  max-width: 62ch;
  margin-bottom: 1.15rem;
}
.cx-lgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}
.cx-lcard {
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(18,16,14,.72), rgba(6,6,8,.9));
  padding: 1.05rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: border-color .35s, transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s;
}
.cx-lcard:hover {
  border-color: rgba(201,164,92,.55);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.cx-lcard .tag {
  color: var(--gold2);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cx-lcard h3 {
  font-family: var(--display);
  font-size: 1.16rem;
  line-height: 1.15;
  color: #fff;
}
.cx-lcard p { color: rgba(244,239,230,.58); font-size: 0.82rem; line-height: 1.5; flex: 1; }
.cx-lcard .more { color: var(--gold2); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.05em; }

.footer-seo {
  border-top: 1px solid rgba(201,164,92,.16);
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  display: grid;
  gap: 1.1rem;
}
.footer-seo-row h4 {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember, #c9a45c);
  margin-bottom: 0.6rem;
}
.footer-seo-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
}
.footer-seo-links a {
  font-size: 0.78rem;
  color: rgba(244,239,230,.66);
  border: 1px solid rgba(201,164,92,.18);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  transition: color .25s, border-color .25s, background .25s;
}
.footer-seo-links a:hover {
  color: #fff;
  border-color: rgba(201,164,92,.5);
  background: rgba(201,164,92,.1);
}
@media (min-width: 900px) {
  .footer-seo { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}

/* ——— Codex v5 — 21st glass + Magic UI marquee/bento, Penumbra gold ——— */
.cx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
}
.home-hero .cx-hero-strips {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 10.6%,
    rgba(255,255,255,.035) 10.6% 11%
  );
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.cx-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.15rem;
  padding: .42rem .85rem .42rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(244,239,230,.82);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.cx-live,
.cx-pill-live i {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  box-shadow: 0 0 10px #4ade80;
}
.cx-live::after,
.cx-pill-live i::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #4ade80;
  opacity: .45;
  animation: cxPing 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes cxPing {
  to { transform: scale(2.1); opacity: 0; }
}

.home-hero h1 em,
.home-hero .headline em {
  background: linear-gradient(100deg, #c9a45c 0%, #fff6d8 38%, #f0d9a0 62%, #c9a45c 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  animation: cxShineText 5.5s ease-in-out infinite;
}
@keyframes cxShineText {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

body.cx .btn,
body.cx .nav-cta,
body.cx .cx-demo {
  border-radius: 999px !important;
}
body.cx .btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.cx .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: cxBtnShine 3.4s ease-in-out infinite;
}
@keyframes cxBtnShine {
  0%, 55% { transform: translateX(-130%); }
  75%, 100% { transform: translateX(130%); }
}

@media (min-width: 981px) {
  body.cx .nav-shell {
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.cx .nav-inner {
    margin-top: .65rem;
    height: 64px;
    padding: 0 1rem 0 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(8,8,10,.52);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    box-shadow: 0 12px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
  }
  body.cx .nav.is-stuck .nav-inner {
    background: rgba(6,6,8,.78);
    border-color: rgba(201,164,92,.35);
  }
}

.cx-trust {
  position: relative;
  z-index: 3;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgba(201,164,92,.42);
  background: linear-gradient(165deg, rgba(16,14,12,.88), rgba(6,6,8,.9));
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  padding: 1.45rem 1.35rem 1.3rem;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(240,217,160,.16);
  animation: fadeSlideIn .85s ease-out .35s both;
}
.cx-trust-glow {
  position: absolute;
  top: -4rem; right: -4rem;
  width: 12rem; height: 12rem;
  border-radius: 50%;
  background: rgba(201,164,92,.14);
  filter: blur(36px);
  pointer-events: none;
}
.cx-trust-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.cx-trust-ico {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  flex-shrink: 0;
}
.cx-trust-head .cx-count,
.cx-trust-head .cx-count-n,
.cx-trust-head .cx-count-sfx {
  font-family: var(--display);
  font-size: 2.05rem !important;
  color: #fff !important;
  line-height: 1;
  font-weight: 600;
}
.cx-trust-head .cx-kpi-label,
.cx-trust-mini .cx-kpi-label {
  display: block;
  color: rgba(244,239,230,.55);
  font-size: .78rem;
  margin-top: .15rem;
}
.cx-trust-bar { margin-bottom: 1.15rem; }
.cx-trust-bar-meta {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-size: .82rem;
  color: rgba(244,239,230,.62);
  margin-bottom: .45rem;
}
.cx-trust-bar-meta b,
.cx-trust-bar-meta .cx-count,
.cx-trust-bar-meta .cx-count-n,
.cx-trust-bar-meta .cx-count-sfx {
  color: #fff !important;
  font-size: .9rem !important;
  font-family: var(--sans);
  font-weight: 700;
}
.cx-trust-track {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
.cx-trust-track i {
  display: block;
  height: 100%;
  width: 98%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f0d9a0, #c9a45c);
  box-shadow: 0 0 16px rgba(201,164,92,.45);
}
.cx-trust-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  padding: 1rem 0 0;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.cx-trust-mini .cx-count,
.cx-trust-mini .cx-count-n,
.cx-trust-mini .cx-count-sfx {
  font-family: var(--display);
  font-size: 1.55rem !important;
  color: #fff !important;
  line-height: 1;
}
.cx-trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.1rem;
}
.cx-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,239,230,.78);
  font-weight: 700;
}
.cx-pill-gold { color: #f0d9a0; border-color: rgba(201,164,92,.4); }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.cx-marquee-wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 2.4rem;
  padding: .85rem 0 .85rem 1.1rem;
  border: 1px solid rgba(255,255,255,.1);
  border-block: 1px solid rgba(255,255,255,.1);
  border-radius: 1.25rem;
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.cx-marquee-wrap > b {
  flex: 0 0 auto;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  z-index: 1;
}
.cx-marquee {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cx-marquee-track {
  display: flex;
  gap: 2.4rem;
  width: max-content;
  animation: cxMarquee 36s linear infinite;
}
.cx-marquee-wrap:hover .cx-marquee-track { animation-play-state: paused; }
.cx-marquee-track span {
  font-family: var(--display);
  font-size: 1.15rem;
  color: rgba(244,239,230,.55);
  letter-spacing: .04em;
  white-space: nowrap;
}
@keyframes cxMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (min-width: 981px) {
  .home-bento .cx-card:nth-child(1) {
    grid-column: span 2 !important;
    min-height: 300px;
  }
  .home-bento .cx-card:nth-child(1) .shot { height: 150px; }
}
.cx-card {
  border-radius: 1.05rem;
  border-color: rgba(255,255,255,.1);
  box-shadow: inset 0 -24px 60px -28px rgba(255,255,255,.08);
}
.cx-card .shot { border-radius: .65rem; }
.cx-cta-bar {
  border-radius: 1.35rem;
  border-color: rgba(255,255,255,.12);
  background:
    radial-gradient(80% 140% at 0% 50%, rgba(201,164,92,.18), transparent 55%),
    rgba(8,8,10,.72);
}

@media (max-width: 980px) {
  .cx-hero::after,
  .home-hero .cx-hero-strips { display: none; }
  .cx-badge { letter-spacing: .1em; }
  .cx-marquee-wrap { padding-left: .85rem; overflow: hidden; mask-image: none; -webkit-mask-image: none; }
  .cx-trust { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-live::after,
  .cx-pill-live i::after,
  .home-hero h1 em,
  .home-hero .headline em,
  body.cx .btn-primary::after,
  .cx-trust,
  .cx-marquee-track { animation: none !important; }
  .cx-marquee-track { transform: none; }
}

/* ——— Home stage: no photos, live gold eclipse ——— */
.home-stage {
  background:
    radial-gradient(ellipse 52% 42% at 78% 44%, rgba(201,164,92,.2), transparent 58%),
    radial-gradient(ellipse 38% 48% at 8% 88%, rgba(201,164,92,.07), transparent 52%),
    #000;
}
.home-stage.cx-hero::after { opacity: .04; }
.cx-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.cx-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background:
    linear-gradient(90deg, #000 2%, rgba(0,0,0,.62) 28%, transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 18%, transparent 74%, #000 100%);
}
.cx-grid,
.cx-particles,
.cx-meteors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cx-grid { z-index: 1; }
.cx-grid rect {
  fill: transparent;
  stroke: rgba(201,164,92,.1);
}
.cx-grid rect.on {
  animation: cxGridFlash 1.35s ease-out forwards;
}
@keyframes cxGridFlash {
  0% { fill: rgba(240,217,160,.5); }
  100% { fill: transparent; }
}
.cx-particles { z-index: 3; }
.cx-meteors { z-index: 4; }
.cx-meteor {
  position: absolute;
  top: -12%;
  left: var(--x, 20%);
  width: 2px;
  height: var(--len, 90px);
  background: linear-gradient(180deg, #fff6d8, rgba(201,164,92,.15) 55%, transparent);
  transform: rotate(215deg);
  animation: cxMeteor var(--dur, 4s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
  box-shadow: 0 0 12px rgba(240,217,160,.55);
}
@keyframes cxMeteor {
  0% { transform: rotate(215deg) translateY(0); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: rotate(215deg) translateY(120vh); opacity: 0; }
}
.cx-orb {
  position: absolute;
  z-index: 2;
  right: -6%;
  top: 10%;
  width: min(62vw, 760px);
  height: min(62vw, 760px);
  pointer-events: none;
}
.cx-orb-core {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, #2a220f 0 28%, #0a0906 48%, #000 70%);
  box-shadow:
    0 0 0 2px rgba(240,217,160,.5),
    0 0 70px 18px rgba(201,164,92,.42),
    0 0 160px 48px rgba(201,164,92,.18),
    inset 18px 14px 50px rgba(240,217,160,.12);
  animation: cxOrbPulse 7.5s ease-in-out infinite;
}
.cx-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, #f0d9a0 74%, transparent 86%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: cxOrbSpin 22s linear infinite;
  opacity: .85;
}
.cx-orb-ring.r2 {
  inset: 7%;
  animation-duration: 34s;
  animation-direction: reverse;
  opacity: .45;
  background: conic-gradient(from 90deg, transparent 0 68%, rgba(201,164,92,.9) 80%, transparent 90%);
}
@keyframes cxOrbSpin {
  to { transform: rotate(360deg); }
}
@keyframes cxOrbPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.035); filter: brightness(1.18); }
}
.cx-spot {
  position: absolute;
  z-index: 2;
  width: 48vmax;
  height: 48vmax;
  left: 72%;
  top: 42%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201,164,92,.2), transparent 64%);
  mix-blend-mode: screen;
  will-change: left, top;
}
.home-stage .page-hero-copy > * {
  animation: cxRise .95s cubic-bezier(.22,1,.36,1) both;
}
.home-stage .cx-badge { animation-delay: .04s; }
.home-stage h1 { animation-delay: .14s; }
.home-stage .lede { animation-delay: .28s; }
.home-stage .hero-actions { animation-delay: .4s; }
.home-stage .cx-trust { animation: cxRise 1s .22s cubic-bezier(.22,1,.36,1) both; }
@keyframes cxRise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

.cx-value.no-photo {
  min-height: 248px;
  justify-content: flex-end;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(201,164,92,.16), transparent 52%),
    linear-gradient(165deg, rgba(18,16,14,.92), rgba(6,6,8,.96));
}
.cx-value.no-photo::after { display: none; }
.cx-value-n {
  position: absolute;
  top: .7rem;
  right: 1rem;
  font-family: var(--display);
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 1;
  color: rgba(201,164,92,.16);
  pointer-events: none;
  z-index: 1;
}
.cx-card.no-shot { min-height: 236px; }
.cx-card-line {
  display: block;
  height: 1px;
  margin: 1rem 0 .35rem;
  background: linear-gradient(90deg, rgba(201,164,92,.75), transparent 78%);
  transform: scaleX(.32);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.cx-card:hover .cx-card-line { transform: scaleX(1); }
.cx-step.no-thumb { min-height: 228px; }
.cx-step-line {
  display: block;
  height: 2px;
  margin-top: auto;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform-origin: left;
  animation: cxLine 2.8s ease-in-out infinite;
}
@keyframes cxLine {
  0%, 100% { transform: scaleX(.25); opacity: .5; }
  50% { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 980px) {
  .cx-orb {
    right: -28%;
    top: auto;
    bottom: -18%;
    width: 78vw;
    height: 78vw;
    opacity: .7;
  }
  .cx-meteors { display: none; }
  .cx-spot { display: none; }
  .cx-value.no-photo { min-height: 168px !important; }
  .cx-step.no-thumb {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .cx-step-line {
    grid-column: 1;
    grid-row: 4;
    margin-top: .45rem;
  }
  .home-bento .cx-card.no-shot { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-orb-core,
  .cx-orb-ring,
  .cx-meteor,
  .cx-grid rect.on,
  .cx-step-line,
  .home-stage .page-hero-copy > *,
  .home-stage .cx-trust { animation: none !important; }
  .home-stage .page-hero-copy > *,
  .home-stage .cx-trust { opacity: 1; transform: none; }
}

/* ——— Codex v6 — film stills + Ken Burns + Magic UI border-beam ——— */
.cx-film-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
}
.cx-film-bg img,
.cx-film-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cx-film-photo,
.cx-film-video {
  position: absolute;
  inset: 0;
  animation: none;
}
.cx-film-bg.is-live .cx-film-photo { opacity: 0; transition: opacity .6s; }
.cx-film-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(240,217,160,.16) 50%, transparent 60%);
  transform: translateX(-130%);
  animation: cxSweep 7.5s ease-in-out infinite;
}
@keyframes cxKen {
  from { transform: scale(1.05) translate3d(-1.4%, 0, 0); }
  to { transform: scale(1.14) translate3d(1.6%, -1.2%, 0); }
}
@keyframes cxSweep {
  0%, 52% { transform: translateX(-130%); }
  78%, 100% { transform: translateX(130%); }
}
.cx-hero.cx-film .cx-hero-veil {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 38%, transparent 68%),
    linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 26%, transparent 72%, rgba(0,0,0,.7) 100%);
}
.cx-hero.cx-film .cx-stage { z-index: 2; }
.home-hero .cx-orb {
  opacity: .5;
  mix-blend-mode: screen;
}
.cx-stage-lite .cx-grid rect { stroke: rgba(201,164,92,.055); }

.cx-value img,
.cx-card .shot img,
.cx-step .thumb img {
  animation: none;
}

.cx-beam .beam {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.cx-beam .beam i {
  position: absolute;
  width: 72px;
  height: 72px;
  background: linear-gradient(90deg, transparent, #fff6d8, transparent);
  filter: drop-shadow(0 0 8px rgba(240,217,160,.8));
  offset-path: rect(0 auto auto 0 round 18px);
  animation: cxBeam 4.6s linear infinite;
}
@keyframes cxBeam {
  to { offset-distance: 100%; }
}

.cx-tilt {
  transform: perspective(920px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--ty, 0px), 0);
  transform-style: preserve-3d;
}
.cx-value.cx-tilt:hover,
.cx-card.cx-tilt:hover,
.cx-step.cx-tilt:hover {
  --ty: -8px;
  transform: perspective(920px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--ty, 0px), 0);
}
.cx-value-n { z-index: 2; }

@media (max-width: 980px) {
  .cx-film-video { animation: none; }
  .cx-beam .beam { display: none; }
  .cx-tilt,
  .cx-value.cx-tilt:hover,
  .cx-card.cx-tilt:hover,
  .cx-step.cx-tilt:hover {
    transform: none;
    --rx: 0deg;
    --ry: 0deg;
    --ty: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-film-photo,
  .cx-film-video,
  .cx-value img,
  .cx-card .shot img,
  .cx-step .thumb img,
  .cx-beam .beam i,
  .cx-film-bg::after { animation: none !important; transform: none !important; }
}

/* ——— Codex v8 — sharp PNG stills, editorial layout, no overlay soup ——— */
.cx-stage,
.cx-film-video,
.cx-film-bg::after,
.home-hero .cx-hero-glow,
.cx-hero.cx-film .cx-hero-glow,
.cx-hero.cx-film::after { display: none !important; }

.cx-film-bg img,
.cx-film-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  image-rendering: auto;
}

.cx-hero.cx-film .cx-hero-veil,
.home-hero .cx-hero-veil {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 32%, rgba(0,0,0,.06) 52%, transparent 68%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 20%, transparent 72%, rgba(0,0,0,.58) 100%);
}

.home-hero .page-hero-copy > * {
  animation: none;
}
.home-hero .cx-trust { animation: none; }

.cx-values {
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.cx-value {
  min-height: 420px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #050505;
}
.cx-value img {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  object-fit: cover;
  opacity: 1;
}
.cx-value::after {
  background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,.42) 72%, rgba(0,0,0,.9) 100%);
}
.cx-value:hover img { opacity: 1; }

.cx-card .shot img,
.cx-step .thumb img {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  object-fit: cover;
  opacity: 1;
}
.cx-value:hover img,
.cx-card:hover .shot img,
.cx-step:hover .thumb img {
  transform: scale(1.04) !important;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}

.home-bento .cx-card .shot { height: 200px; }
.cx-card .shot { height: 190px; }
.cx-card.feat .shot { height: 280px; }
.cx-step .thumb { height: 200px; }

body.cx .cx-values .reveal,
body.cx .cx-bento .reveal,
body.cx .cx-steps .reveal,
body.cx .home-blog .reveal {
  filter: none !important;
  clip-path: none !important;
  transform: translate3d(0, 28px, 0);
}

@media (min-width: 981px) {
  .home-bento .cx-card:nth-child(1) .shot { height: 280px; }
  .cx-values-block { align-items: stretch; }
}

@media (max-width: 980px) {
  .cx-film-photo { object-position: 50% 38%; }
  .home-hero .cx-hero-veil,
  .cx-hero.cx-film .cx-hero-veil {
    background:
      linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.28) 36%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.72) 100%);
  }
  .home-hero .page-hero-copy > *,
  .home-hero .cx-trust { animation: none; }
  .cx-value { min-height: 280px !important; }
  .cx-values { grid-template-columns: 1fr 1fr !important; gap: .55rem !important; }
  .cx-card .shot,
  .home-bento .cx-card .shot { height: 168px !important; }
  .cx-step .thumb { height: 168px; }
}

/* ——— Codex v11 — scoped .cx-sun (never collide with FAB .cx-eclipse) ——— */
.home-hero.home-stage {
  min-height: 100svh;
  align-items: end;
  padding: calc(var(--nav, 84px) + 1.2rem) 0 0;
  background: #000;
  overflow: hidden;
}
.cx-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.cx-sky-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 90% at 68% 46%, rgba(201,164,92,.7), transparent 64%),
    radial-gradient(ellipse 36% 48% at 18% 18%, rgba(240,217,160,.16), transparent 58%),
    radial-gradient(ellipse 50% 40% at 12% 88%, rgba(201,164,92,.12), transparent 55%),
    linear-gradient(90deg, #000 0 18%, rgba(0,0,0,.45) 36%, transparent 58%);
}
.cx-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(240,217,160,.7), transparent),
    radial-gradient(1px 1px at 22% 42%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 38% 12%, rgba(240,217,160,.45), transparent),
    radial-gradient(1px 1px at 48% 28%, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 63% 8%, rgba(240,217,160,.8), transparent),
    radial-gradient(1px 1px at 71% 22%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 84% 14%, rgba(240,217,160,.5), transparent),
    radial-gradient(1.5px 1.5px at 91% 36%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 8% 62%, rgba(240,217,160,.4), transparent),
    radial-gradient(1px 1px at 18% 78%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.5px 1.5px at 32% 88%, rgba(240,217,160,.55), transparent),
    radial-gradient(1px 1px at 44% 68%, rgba(255,255,255,.25), transparent),
    radial-gradient(2px 2px at 58% 92%, rgba(240,217,160,.7), transparent),
    radial-gradient(1px 1px at 76% 74%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 94% 82%, rgba(240,217,160,.45), transparent);
  opacity: .85;
  animation: cxStarDrift 18s ease-in-out infinite alternate;
}
@keyframes cxStarDrift {
  from { opacity: .55; }
  to { opacity: 1; }
}
.cx-rays {
  position: absolute;
  left: 52%;
  top: 44%;
  width: min(120vh, 900px);
  height: min(120vh, 900px);
  transform: translate(-8%, -50%);
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255,246,216,.22) 0 1.1deg,
    transparent 1.1deg 14deg
  );
  -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 56%);
  mask-image: radial-gradient(circle, #000 10%, transparent 56%);
  animation: cxOrbSpin 56s linear infinite;
  opacity: .85;
}
.cx-sun {
  position: absolute;
  left: 54%;
  top: 32%;
  width: min(78vh, 680px);
  height: min(78vh, 680px);
  z-index: 1;
}
.cx-sun-corona {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,252,236,1) 0 18%,
    rgba(255,236,180,.98) 28%,
    rgba(240,217,160,.88) 40%,
    rgba(201,164,92,.5) 55%,
    transparent 72%);
  filter: blur(2px);
  animation: cxPulse 5.5s ease-in-out infinite alternate;
}
.cx-sun-halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(255,246,216,.65),
    0 0 70px 20px rgba(201,164,92,.8),
    0 0 160px 50px rgba(201,164,92,.38),
    0 0 280px 80px rgba(201,164,92,.16);
  animation: cxPulse 7s ease-in-out infinite alternate-reverse;
}
.cx-sun-flare {
  position: absolute;
  inset: 4%;
  background:
    linear-gradient(90deg, transparent 46%, rgba(255,252,236,1) 50%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(255,236,180,.85) 50%, transparent 54%);
  -webkit-mask-image: radial-gradient(circle, #000 0 16%, transparent 48%);
  mask-image: radial-gradient(circle, #000 0 16%, transparent 48%);
  mix-blend-mode: screen;
  opacity: .9;
  animation: cxPulse 6s ease-in-out infinite alternate;
}
.cx-sun-disk {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, #5a4620 0 6%, #1c160c 28%, #070604 55%, #000 100%);
  transform: translate(18%, 8%);
  box-shadow:
    inset 24px 18px 52px rgba(240,217,160,.22),
    inset -24px -32px 56px rgba(0,0,0,.9),
    -28px 0 40px rgba(255,246,216,.35);
}
.cx-sun-rim {
  position: absolute;
  inset: 23.2%;
  border-radius: 50%;
  background: conic-gradient(from 210deg, transparent 0 52%, #fff 64%, #fff6d8 70%, transparent 82%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: cxOrbSpin 16s linear infinite;
  opacity: 1;
}
.cx-sun-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(240,217,160,.28);
  animation: cxOrbSpin 32s linear infinite;
}
.cx-sun-ring.a {
  inset: -7%;
  border-color: transparent;
  background: conic-gradient(from 20deg, transparent 0 68%, #fff6d8 76%, transparent 86%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  opacity: .95;
}
.cx-sun-ring.b {
  inset: 10%;
  animation-duration: 44s;
  animation-direction: reverse;
  background: conic-gradient(from 110deg, transparent 0 72%, rgba(201,164,92,.95) 82%, transparent 90%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  border: 0;
  opacity: .8;
}
.cx-sun-sat {
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #fff6d8;
  box-shadow: 0 0 16px 5px rgba(240,217,160,.95);
}
.cx-sun-sat.s1 { width: 11px; height: 11px; animation: cxSunSat1 14s linear infinite; }
.cx-sun-sat.s2 { width: 6px; height: 6px; animation: cxSunSat2 22s linear infinite; opacity: .85; }
.cx-sun-sat.s3 { width: 8px; height: 8px; animation: cxSunSat3 19s linear infinite reverse; opacity: .75; }
@keyframes cxSunSat1 {
  from { transform: rotate(0deg) translateX(min(44vh, 380px)) rotate(0deg); }
  to { transform: rotate(360deg) translateX(min(44vh, 380px)) rotate(-360deg); }
}
@keyframes cxSunSat2 {
  from { transform: rotate(40deg) translateX(min(36vh, 300px)); }
  to { transform: rotate(400deg) translateX(min(36vh, 300px)); }
}
@keyframes cxSunSat3 {
  from { transform: rotate(190deg) translateX(min(40vh, 340px)); }
  to { transform: rotate(550deg) translateX(min(40vh, 340px)); }
}

.cx-ghost {
  position: absolute;
  left: -1.2%;
  bottom: 7.2rem;
  z-index: 1;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(5.5rem, 20vw, 19rem);
  font-weight: 600;
  line-height: .72;
  letter-spacing: -0.07em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,164,92,.28);
  pointer-events: none;
  user-select: none;
}

.home-hero.home-stage .cx-hero-grid {
  z-index: 2;
  width: min(1320px, calc(100% - 2.4rem));
  padding-bottom: 7.5rem;
}
.home-hero.home-stage .page-hero-copy {
  max-width: min(38rem, 44vw);
  position: relative;
  z-index: 2;
}
.home-hero.home-stage h1,
.home-hero.home-stage .headline {
  font-size: clamp(3.7rem, 8.6vw, 8.4rem);
  line-height: .84;
  max-width: 9.2ch;
  letter-spacing: -0.035em;
  text-shadow: 0 8px 40px rgba(0,0,0,.85), 0 2px 12px rgba(0,0,0,.6);
}
.home-hero.home-stage .lede {
  font-size: 1.1rem;
  max-width: 32rem;
  color: rgba(244,239,230,.82);
}
.home-hero.home-stage .page-hero-copy > * {
  animation: cxRise .95s cubic-bezier(.22,1,.36,1) both;
}
.home-hero.home-stage .cx-badge { animation-delay: .05s; }
.home-hero.home-stage h1 { animation-delay: .14s; }
.home-hero.home-stage .lede { animation-delay: .26s; }
.home-hero.home-stage .hero-actions { animation-delay: .4s; }
.home-hero.home-stage h1 em,
.home-hero.home-stage .headline em {
  background: linear-gradient(110deg, #8a6a2f 0%, #f0d9a0 36%, #fff8e8 50%, #f0d9a0 64%, #c9a45c 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: cxShineText 3.2s ease-in-out infinite;
  text-shadow: none;
  font-size: 1.04em;
}

.cx-gold-ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-top: 1px solid rgba(201,164,92,.42);
  background: linear-gradient(180deg, rgba(201,164,92,.14), rgba(0,0,0,.55));
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cx-gold-ticker-track {
  display: flex;
  gap: 2.6rem;
  width: max-content;
  padding: 1.05rem 0 1.1rem;
  animation: cxMarquee 32s linear infinite;
}
.cx-gold-ticker b {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  color: #f0d9a0;
  letter-spacing: .04em;
  white-space: nowrap;
}
.cx-gold-ticker span {
  font-family: var(--display);
  font-size: 1.2rem;
  color: rgba(244,239,230,.45);
  font-style: italic;
  white-space: nowrap;
}
.page-home .cx-brands { display: none; }

@media (max-width: 980px) {
  .home-hero .cx-meteors { display: block; }
  .home-hero .cx-meteor:nth-child(n+4) { display: none; }
  .cx-rays { opacity: .5; animation-duration: 90s; }
  .cx-sun-sat.s3 { display: none; }
  .cx-sun {
    left: 42%;
    top: 8%;
    width: min(92vw, 460px);
    height: min(92vw, 460px);
    opacity: .95;
  }
  .cx-sun-disk { transform: translate(16%, 10%); }
  .cx-ghost {
    font-size: clamp(4.2rem, 28vw, 9rem);
    bottom: 5.5rem;
    opacity: .75;
  }
  .home-hero.home-stage .page-hero-copy { max-width: none; }
  .home-hero.home-stage h1,
  .home-hero.home-stage .headline {
    font-size: clamp(3.15rem, 13.5vw, 4.5rem);
    max-width: 10ch;
  }
  .home-hero.home-stage .cx-hero-grid { padding-bottom: 5.2rem; }
  .home-hero.home-stage .page-hero-copy > * { animation: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-rays, .cx-sun-corona, .cx-sun-halo, .cx-sun-flare, .cx-sun-rim,
  .cx-sun-ring, .cx-sun-sat, .cx-meteor, .cx-stars, .cx-gold-ticker-track,
  .home-hero.home-stage h1 em, .home-hero.home-stage .page-hero-copy > * {
    animation: none !important;
  }
}

/* ——— Codex v12 — $5k atelier: reel, index, beam, grain, dock ——— */
::selection { background: #c9a45c; color: #050505; }
body.cx { scrollbar-color: #c9a45c #050505; }
.cx-grain {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode: overlay;
}

.cx-beam { position: relative; overflow: hidden; }
.cx-beam-dot {
  position: absolute;
  width: 56px;
  height: 56px;
  left: 0;
  top: 0;
  background: radial-gradient(circle, #fff8e8 0 18%, transparent 70%);
  offset-path: rect(1px auto auto 1px round 999px);
  offset-distance: 0%;
  animation: cxBeamRun 3.6s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .85;
}
@keyframes cxBeamRun {
  to { offset-distance: 100%; }
}

html:has(body.page-home) {
  overflow-x: hidden;
  scroll-behavior: auto;
}
.cx-reel-sec {
  padding: 0;
  background: #050505;
  isolation: isolate;
  z-index: 2;
}
.cx-reel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
  padding: 5.2rem 0 3.2rem;
  overflow: visible;
  background: #050505;
}
.cx-reel-clip {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(107, 255, 77, .45) transparent;
}
.cx-reel-clip::-webkit-scrollbar { height: 4px; }
.cx-reel-clip::-webkit-scrollbar-thumb {
  background: rgba(107, 255, 77, .4);
  border-radius: 999px;
}
.cx-reel-head {
  width: min(1320px, calc(100% - 2.4rem));
  margin-inline: auto;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.2rem;
}
.cx-reel-head .headline {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: .9;
  max-width: 12ch;
  margin: 0;
}
.cx-reel-track {
  display: flex;
  gap: 1.1rem;
  width: max-content;
  padding-left: max(1.2rem, calc((100vw - 1320px) / 2));
  padding-right: 12vw;
}
.cx-reel-track .project {
  flex: 0 0 min(72vw, 620px);
  border-radius: 2px;
  background: #0a0a0c;
  border: 1px solid rgba(201,164,92,.22);
  scroll-snap-align: start;
}
.cx-reel-track .project:hover { transform: none; box-shadow: none; border-color: rgba(240,217,160,.55); }
.cx-reel-track .project-shot { aspect-ratio: 16 / 10; }
.cx-reel-track .project-body { padding: 1rem 1.05rem 1.1rem; }
.cx-reel-track .project-body h3 { color: #f7f8f6; }

.cx-index { display: flex; flex-direction: column; }
.cx-index-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1.35rem 0;
  border-top: 1px solid rgba(201,164,92,.18);
  color: inherit;
}
.cx-index-row:last-child { border-bottom: 1px solid rgba(201,164,92,.18); }
.cx-index-row h3 {
  font-family: var(--display);
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  font-weight: 600;
  line-height: 1.05;
  margin: 0;
}
.cx-index-row p {
  margin: 0;
  color: var(--mist);
  font-size: .95rem;
  max-width: 46ch;
}
.cx-index-row .go {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(201,164,92,.35);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f0d9a0;
  transition: transform .45s var(--ease), background .35s, color .35s;
}
.cx-index-row:hover .go {
  background: #c9a45c;
  color: #050505;
  transform: translateX(4px);
}

.cx-finale {
  padding: 6.5rem 0 7rem;
  border-top: 1px solid rgba(201,164,92,.28);
  background:
    radial-gradient(ellipse 50% 80% at 80% 50%, rgba(201,164,92,.16), transparent 60%),
    #050505;
  text-align: left;
}
.cx-finale h2 {
  font-family: var(--display);
  font-size: clamp(3rem, 8vw, 7.2rem);
  line-height: .86;
  letter-spacing: -.04em;
  max-width: 10ch;
  margin: 0 0 .6rem;
}
.cx-finale p {
  color: var(--mist);
  max-width: 36ch;
  margin: 0 0 1.6rem;
}
.page-home .cx-sec-head .headline { max-width: 14ch; }

.cx-wa-dock {
  display: none;
}

@media (max-width: 980px) {
  .cx-reel {
    padding: 2.4rem 0 1.6rem;
  }
  .page-home .cx-gold-ticker { padding-bottom: 4.4rem; }
  .cx-reel-head { flex-direction: column; align-items: start; }
  .cx-reel-clip { scroll-snap-type: x mandatory; }
  .cx-reel-track {
    padding-right: 1.2rem;
  }
  .cx-reel-track .project {
    flex: 0 0 min(86vw, 340px);
  }
  .cx-index-row {
    grid-template-columns: 1fr auto;
    gap: .55rem .8rem;
    padding: 1rem 0;
  }
  .cx-index-row p { grid-column: 1 / -1; font-size: .86rem; }
  .cx-finale { padding: 3.2rem 0 5.8rem; }
  body.cx { padding-bottom: 4.8rem; }
  .cx-wa-dock {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: max(.85rem, env(safe-area-inset-left));
    right: 5.6rem;
    bottom: max(.85rem, env(safe-area-inset-bottom));
    z-index: 85;
    height: 52px;
    border-radius: 0;
    background: #1a4f8b;
    color: #f7f8f6;
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: 0 12px 32px rgba(22, 25, 28, .18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-beam-dot { animation: none !important; display: none; }
}

/* ——— Codex v15 — Black Viper, fixed full-quality video ——— */
::selection { background: #6bff4d; color: #050505; }
body.cx { scrollbar-color: #6bff4d #050505; }
.cx-grain {
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("/media/codex/viper-scales.jpg");
  background-size: 420px;
  z-index: 60;
}
.cx-beam, .cx-beam-dot { display: none !important; }

/* Fixed looping snake — homepage only, never compress source */
.cx-viper-bg { display: none; }
body.page-viper .cx-viper-bg {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #050505;
}
body.page-viper .cx-viper-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
body.page-viper .cx-viper-pc { display: block; }
body.page-viper .cx-viper-mob { display: none; }
body.page-viper .cx-viper-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,.28) 35%, rgba(5,5,5,.45) 70%, rgba(5,5,5,.72) 100%),
    radial-gradient(ellipse 70% 55% at 70% 40%, rgba(107,255,77,.08), transparent 60%);
}
body.page-viper .nav,
body.page-viper main,
body.page-viper footer,
body.page-viper .cookie-banner { position: relative; z-index: 2; }
body.page-viper .nav { z-index: 960; }
body.page-viper .cx-eclipse { z-index: 90; }
body.page-viper .cx-wa-dock { z-index: 85; }
body.page-viper .scroll-progress { z-index: 10000; }

.page-home .home-hero {
  background: transparent;
  color: #f2f4f0;
  overflow: hidden;
  min-height: 100svh;
  align-items: center;
}
.page-home .home-hero .cx-hero-grid {
  grid-template-columns: 1fr;
  width: min(1320px, calc(100% - 2.4rem));
  margin-inline: auto;
  padding-top: 1.2rem;
  padding-bottom: 3rem;
  position: relative;
  z-index: 2;
}
.page-home .home-hero .page-hero-copy { max-width: 40rem; }
.page-home .home-hero h1,
.page-home .home-hero .headline {
  color: #f2f4f0;
  text-shadow: 0 8px 40px rgba(0,0,0,.65);
  font-size: clamp(3.4rem, 7.4vw, 7rem);
  max-width: 11ch;
  line-height: .84;
  letter-spacing: -.035em;
}
.page-home .home-hero h1 em,
.page-home .home-hero .headline em {
  color: #6bff4d;
  font-style: italic;
  text-shadow: 0 0 40px rgba(107,255,77,.35);
}
.page-home .home-hero .lede {
  color: rgba(242, 244, 240, .72);
  max-width: 34ch;
  text-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.page-home .cx-kicker {
  color: rgba(107, 255, 77, .75);
  letter-spacing: .2em;
  margin-bottom: .9rem;
}
.cx-kpi-line {
  margin-top: 1.7rem;
  font-size: .72rem;
  letter-spacing: .12em;
  color: rgba(242, 244, 240, .5);
  text-transform: uppercase;
  font-weight: 600;
}

body.page-viper .section .container,
body.page-viper .cx-values-block,
body.page-viper .cx-reel,
body.page-viper .cx-finale .container,
body.page-viper .contact-shell {
  background: rgba(5, 5, 5, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(107, 255, 77, .12);
}
body.page-viper .cx-values-block {
  padding: 2rem 1.4rem;
  border-radius: 2px;
  margin: 1.5rem 0;
}
body.page-viper .section .container {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-radius: 2px;
}
body.page-viper .cx-reel {
  background: rgba(5, 5, 5, .62);
  color: #f2f4f0;
  border-left: 0;
  border-right: 0;
}
body.page-viper .cx-reel-head .headline { color: #f2f4f0; }
body.page-viper .cx-reel .btn-ghost {
  color: #f2f4f0 !important;
  border-color: rgba(107, 255, 77, .4) !important;
}
body.page-viper .cx-reel-track .project {
  background: rgba(14, 15, 12, .85);
  border-color: rgba(107, 255, 77, .18);
  transition: border-color .35s, transform .45s cubic-bezier(.22,1,.36,1);
}
body.page-viper .cx-reel-track .project:hover {
  border-color: rgba(107, 255, 77, .55);
  transform: translateY(-4px);
}

.cx-sec-head .headline,
.cx-values-head .headline,
.cx-step h3,
body.cx .form h3,
body.cx .project-body h3 { color: #f2f4f0; }
.cx-sec-head .headline em,
.cx-values-head .headline em { color: #6bff4d; text-shadow: 0 0 24px rgba(107,255,77,.25); }
.cx-step p { color: rgba(242, 244, 240, .55); }

.cx-value {
  border: 1px solid rgba(107, 255, 77, .16);
  overflow: hidden;
  position: relative;
}
.cx-value::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(5,5,5,.88) 100%);
  pointer-events: none;
}
.cx-value h3, .cx-value p, .cx-value .go, .cx-value .cx-value-n { position: relative; z-index: 1; }
.cx-value:hover { border-color: rgba(107, 255, 77, .5); box-shadow: 0 0 32px rgba(107,255,77,.12); }

.cx-index-row {
  border-top-color: rgba(107, 255, 77, .14);
  transition: background .35s, padding-left .45s cubic-bezier(.22,1,.36,1);
}
.cx-index-row:last-child { border-bottom-color: rgba(107, 255, 77, .14); }
.cx-index-row:hover {
  background: rgba(107, 255, 77, .06);
  padding-left: .4rem;
}
.cx-index-row .go {
  border-color: rgba(107, 255, 77, .35);
  color: #6bff4d;
  border-radius: 50%;
}
.cx-index-row:hover .go {
  background: #6bff4d;
  color: #050505;
  box-shadow: 0 0 18px rgba(107,255,77,.45);
}

.cx-finale { background: transparent !important; color: #f2f4f0; border-top: 0; }
body.page-viper .cx-finale .container {
  background: rgba(5, 5, 5, .7);
  padding: 3rem 1.6rem;
  border-color: rgba(107, 255, 77, .22);
}
.cx-finale h2 { color: #f2f4f0; }
.cx-finale p { color: rgba(242, 244, 240, .65); }
.cx-finale .btn-primary {
  background: #6bff4d !important;
  color: #050505 !important;
}

.cx-eclipse-core {
  border-radius: 50%;
  width: 58px;
  height: 58px;
  background: #050505 !important;
  color: #6bff4d !important;
  border: 1px solid rgba(107, 255, 77, .45);
  box-shadow: 0 0 24px rgba(107, 255, 77, .25), 0 12px 36px rgba(0,0,0,.45) !important;
}
.cx-eclipse-core::before {
  display: block !important;
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from var(--cx-hue, 0deg), #6bff4d, transparent 40%, #6bff4d 70%, transparent);
  z-index: -1;
  animation: cxOrbitSpin 4s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  opacity: .9;
}
.cx-eclipse-core::after { display: none !important; }
.cx-eclipse-p { color: #6bff4d !important; }

body.cx .menu-btn {
  border: 1px solid rgba(107, 255, 77, .28);
  background: transparent;
}
body.cx .menu-btn i { background: #f2f4f0; }
body.cx .mobile-nav { background: #050505; }
body.cx .mobile-nav a { color: #f2f4f0; }
body.cx .mobile-cta {
  background: #6bff4d !important;
  color: #050505 !important;
  border-radius: 999px;
}

@keyframes cxSlither {
  from { opacity: 0; transform: translateX(-28px) skewX(-4deg); }
  to { opacity: 1; transform: translateX(0) skewX(0); }
}
body.page-viper .reveal.visible {
  animation: cxSlither .85s cubic-bezier(.22,1,.36,1) both;
}

/* Inner pages: solid conversion surfaces, NO video */
body.page-inner { background: #050505; }
body.page-inner .cx-viper-bg { display: none !important; }
body.page-inner .section .container,
body.page-inner .cx-film { background: #0e0f0c; }
body.page-inner .cx-hero { background: #050505; }

@media (max-width: 980px) {
  body.page-viper .cx-viper-pc { display: none; }
  body.page-viper .cx-viper-mob { display: block; }
  .cx-wa-dock {
    border-radius: 999px;
    background: #6bff4d;
    color: #050505;
    box-shadow: 0 0 28px rgba(107,255,77,.35);
  }
  .page-home .home-hero .page-hero-copy { max-width: none; }
  .page-home .home-hero h1,
  .page-home .home-hero .headline {
    font-size: clamp(2.9rem, 12.5vw, 4.4rem);
    max-width: 11ch;
  }
  body.page-viper .cx-viper-veil {
    background: linear-gradient(180deg, rgba(5,5,5,.5) 0%, rgba(5,5,5,.35) 40%, rgba(5,5,5,.78) 100%);
  }
}

@media (min-width: 981px) {
  .page-home .home-hero .cx-hero-grid {
    min-height: calc(100svh - 84px);
    display: grid;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-viper .cx-viper-bg video { display: none !important; }
  body.page-viper .cx-viper-bg {
    background: #050505 url("/media/codex/viper-scales.jpg") center / cover no-repeat;
  }
  body.page-viper .reveal.visible { animation: none !important; }
  .cx-eclipse-core::before { animation: none !important; }
}

/* ——— Loader: DON'T BLINK ——— */
body.is-loading { overflow: hidden; }
.cx-loader {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  background: #030303;
  color: #f2f4f0;
  transition: opacity .7s cubic-bezier(.22,1,.36,1), visibility .7s;
}
.cx-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.cx-loader-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 55%, rgba(107,255,77,.12), transparent 62%),
    url("/media/codex/viper-scales.jpg") center / 520px;
  opacity: .18;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.cx-loader-core {
  position: relative;
  text-align: center;
  padding: 1.5rem;
  max-width: min(92vw, 920px);
}
.cx-loader-mark {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .42em;
  color: rgba(107, 255, 77, .75);
  margin: 0 0 1.4rem;
  opacity: 0;
  transform: translateY(12px);
  animation: cxLoadRise .7s .15s cubic-bezier(.22,1,.36,1) forwards;
}
.cx-loader-line {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3.4rem, 12vw, 8.2rem);
  line-height: .88;
  letter-spacing: -.04em;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .18em .35em;
}
.cx-loader-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.1em) skewX(-8deg);
  animation: cxLoadStrike .95s cubic-bezier(.16,1,.3,1) forwards;
}
.cx-loader-word:nth-child(1) { animation-delay: .35s; }
.cx-loader-word:nth-child(2) { animation-delay: .55s; }
.cx-loader-word.is-venom {
  color: #6bff4d;
  text-shadow: 0 0 48px rgba(107,255,77,.45);
  font-style: italic;
}
.cx-loader-sub {
  margin: 1.35rem 0 0;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  color: rgba(242, 244, 240, .42);
  opacity: 0;
  animation: cxLoadRise .7s 1s cubic-bezier(.22,1,.36,1) forwards;
}
.cx-loader-bar {
  width: min(220px, 48vw);
  height: 2px;
  margin: 2rem auto 0;
  background: rgba(242, 244, 240, .12);
  overflow: hidden;
  border-radius: 999px;
  opacity: 0;
  animation: cxLoadRise .5s .9s forwards;
}
.cx-loader-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, transparent, #6bff4d, #b8ff9a);
  box-shadow: 0 0 16px rgba(107,255,77,.65);
  animation: cxLoadBar 1.6s 1s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes cxLoadRise {
  to { opacity: 1; transform: none; }
}
@keyframes cxLoadStrike {
  to { opacity: 1; transform: translateY(0) skewX(0); }
}
@keyframes cxLoadBar {
  to { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-loader-mark,
  .cx-loader-word,
  .cx-loader-sub,
  .cx-loader-bar,
  .cx-loader-bar i {
    animation: none !important;
    opacity: 1;
    transform: none;
    width: 100%;
  }
}