/*
Theme Name: 3XRANK
Description: 3XRANK site theme exported from the design master.
Version: 17.0
Author: 3XRANK
*/

@keyframes sc-shine { 
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.scp0:hover { opacity: 1 !important; background: rgba(255, 255, 255, 0.06) !important; }
.scp1:hover { background: rgba(255, 255, 255, 0.05) !important; color: rgb(253, 105, 37) !important; }
.scp2:hover { color: rgb(253, 105, 37) !important; background: rgba(255, 255, 255, 0.05) !important; }
.scp3:hover { background: rgba(253, 105, 37, 0.09) !important; }
.scp4:hover { opacity: 0.8 !important; }
.scp5:hover { border-color: rgba(253, 105, 37, 0.5) !important; }
.scp6:hover { color: rgb(232, 90, 15) !important; }
* { box-sizing: border-box; }
body { margin: 0px; background: rgb(14, 13, 18); -webkit-font-smoothing: antialiased; }
a { color: rgb(255, 138, 80); }
a:hover { color: rgb(255, 160, 113); }
@keyframes locscroll2 { 
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0px); }
}
.x-locrow:hover { animation-play-state: paused; }
.x-locmq:hover { color: rgb(253, 105, 37) !important; -webkit-text-stroke: 1.5px rgb(253, 105, 37) !important; }
@keyframes wwscroll { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
@keyframes awpulse { 
  0%, 100% { box-shadow: rgba(253, 105, 37, 0) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(253, 105, 37, 0.35) 0px 0px 18px 2px; }
}
.x-card:hover { transform: translateY(-3px); border-color: rgba(253, 105, 37, 0.45) !important; }
.x-card:hover .x-siteimg { transform: scale(1.06) translateY(-2%); }
.ww-tld-mask:hover .ww-tld-track { animation-play-state: paused; }
.x-mq:hover { animation-play-state: paused; }
.x-mgmt:hover { border-color: rgba(253, 105, 37, 0.5) !important; background: rgba(253, 105, 37, 0.06) !important; }
.x-burger { display: none; }
@media (max-width: 960px) {
  .x-navlinks { display: none !important; }
  .x-navcur { display: none !important; }
  .x-navcta { display: none !important; }
  .x-burger { display: flex !important; }
}
@media (max-width: 760px) {
  .x-treewrap { display: none !important; }
  .x-treemob { display: flex !important; }
}
@media (max-width: 900px) {
  .x-audx { flex-direction: column; }
}
@media (max-width: 980px) {
  .x-compwrap { overflow-x: visible !important; }
  .x-compmin { min-width: 0px !important; }
  .x-comphead { display: none !important; }
  .x-row { grid-template-columns: 1fr !important; padding-bottom: 14px; }
  .x-cq { position: static !important; padding: 16px 18px 6px !important; font-size: 15px !important; }
  .x-ca, .x-cb, .x-cc { flex-wrap: wrap; padding: 10px 18px 4px !important; }
  .x-ca { margin: 2px 14px 4px; border-radius: 12px !important; }
  .x-ca::before, .x-cb::before, .x-cc::before { display: block; width: 100%; font-family: "Space Grotesk", sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 2px; }
  .x-ca::before { content: "3XRANK"; color: rgb(255, 138, 80); }
  .x-cb::before { content: "Other AI builders"; color: rgb(152, 147, 141); }
  .x-cc::before { content: "A web design agency"; color: rgb(152, 147, 141); }
}
.x-2col { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) {
  .x-2col { grid-template-columns: 1fr; }
}
.x-3col { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .x-3col { grid-template-columns: 1fr; }
}
.x-ledger { display: grid; grid-template-columns: 250px 1fr; }
@media (max-width: 760px) {
  .x-ledger { grid-template-columns: 1fr; }
}
.x-aud { display: grid; grid-template-columns: repeat(6, 1fr); }
.x-aud > a { grid-column: span 2; }
.x-aud > a:nth-child(4), .x-aud > a:nth-child(5) { grid-column: span 3; }
@media (max-width: 980px) {
  .x-aud > a { grid-column: span 6 !important; }
}
@media (max-width: 1020px) {
  .x-foot { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .x-foot { grid-template-columns: repeat(2, 1fr) !important; }
}
.x-locgrid { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 12px; }
@media (max-width: 1020px) {
  .x-locgrid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .x-locgrid .x-loccard { grid-column: auto !important; }
  .x-locgrid .x-loccard:last-child { grid-column: 1 / -1 !important; }
}
@media (max-width: 600px) {
  .x-locgrid { grid-template-columns: 1fr; }
  .x-locgrid .x-loccard:last-child { grid-column: auto !important; }
}
.x-loccard:hover { border-color: rgba(253, 105, 37, 0.55); transform: translateY(-2px); box-shadow: rgba(253, 105, 37, 0.35) 0px 18px 44px -18px; }
.x-loccity:hover { color: rgb(232, 90, 15) !important; text-decoration: underline !important; }
@keyframes footwave { 
  0% { transform: translate(-6%, 0px); }
  100% { transform: translate(6%, 0px); }
}
.x-flink { color: rgb(156, 153, 168); text-decoration: none; transition: color 0.18s, transform 0.18s; display: inline-block; }
.x-flink:hover { color: rgb(255, 255, 255); transform: translateX(3px); }
.x-soc:hover { color: rgb(255, 138, 80) !important; border-color: rgba(253, 105, 37, 0.55) !important; background: rgba(253, 105, 37, 0.08) !important; }
.x-ctabtn:hover { box-shadow: rgba(253, 105, 37, 0.7) 0px 14px 34px -8px !important; transform: translateY(-1px); }
.x-ctagrid { display: grid; grid-template-columns: 1.25fr 0.92fr; gap: clamp(24px, 3vw, 46px); align-items: center; }
@media (max-width: 900px) {
  .x-ctagrid { grid-template-columns: 1fr; }
}
.x-foothead { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 3vw, 52px); align-items: center; }
@media (max-width: 960px) {
  .x-foothead { grid-template-columns: 1fr; gap: 26px; }
  .x-wedgewrap { margin-top: 22px; }
  .x-wedgewrap, .x-wedge { border-radius: 22px; clip-path: none !important; mask: none !important; }
}
@media (max-width: 900px) {
  .x-footgrid { grid-template-columns: 1fr !important; }
  .x-foot { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .x-foot { grid-template-columns: repeat(2, 1fr) !important; }
  .x-pay { justify-content: center; }
}
html { scroll-behavior: smooth; }
.x-qnl { opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; }
.x-qni:hover .x-qnl { opacity: 1; transform: translateY(-50%); }
@media (max-width: 1100px) {
  .x-qnav { display: none; }
}
@media (max-width: 640px) {
  header[data-screen-label="Hero"] a[style*="border-radius:999px"] { font-size: 12px !important; padding: 9px 16px !important; }
  header[data-screen-label="Hero"] span[style*="border-radius:999px"] { font-size: 10.5px !important; padding: 4px 10px !important; }
  header[data-screen-label="Hero"] div[style*="margin-top:32px"][style*="flex-wrap:wrap"] { margin-top: 16px !important; gap: 8px !important; }
}
.x-vbar { position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 95; height: 36px; overflow: hidden; display: flex; align-items: center; background: linear-gradient(90deg, rgb(232, 90, 15), rgb(253, 105, 37)); font-family: "IBM Plex Mono", "Space Grotesk", monospace; font-size: 13.5px; letter-spacing: 0.03em; color: rgb(255, 243, 234); }
.x-vroll { display: flex; flex: 0 0 auto; white-space: nowrap; animation: 150s linear 0s infinite normal none running x-vmar; }
.x-vbar:hover .x-vroll { animation-play-state: paused; }
.x-vs { display: inline-flex; align-items: center; gap: 7px; padding: 0px 42px; }
.x-vs b { color: rgb(14, 13, 18); font-weight: 700; }
@keyframes x-vmar { 
  100% { transform: translateX(-50%); }
}
body { padding-bottom: 36px; background: rgb(10, 9, 13); }
@media (max-width: 640px) {
  .x-vbar { height: 30px; font-size: 12px; }
  .x-vs { padding: 0px 28px; }
  body { padding-bottom: 30px; }
}
@media (max-width: 640px) {
  .x-fverse { width: 100%; flex-wrap: wrap; gap: 2px; line-height: 1.5; padding: 9px 14px; }
}