/* ============================================================
   Satoshi Font Family Definitions
   ============================================================ */
@font-face {
  font-family: 'Satoshi';
  src: url('../satoshi/Satoshi-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../satoshi/Satoshi-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../satoshi/Satoshi-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../satoshi/Satoshi-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../satoshi/Satoshi-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../satoshi/Satoshi-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../satoshi/Satoshi-Bold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../satoshi/Satoshi-BoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../satoshi/Satoshi-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../satoshi/Satoshi-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../satoshi/Satoshi-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../satoshi/Satoshi-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   Web{X} Studio - shared stylesheet
   Extracted & consolidated from the original design canvas.
   Loaded by every page (cache-friendly across the whole site).
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:#000000;color:#EDEDED;font-family:'Satoshi',sans-serif;overflow-x:hidden}
::selection{background:#9D5CFF;color:#0A0A0A}
img{max-width:100%;display:block}
section[id]{scroll-margin-top:96px}

/* ---------- Lenis smooth scroll ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* Native browser cursor is enabled globally */

/* While the page is actively scrolling we pause any hover-driven transforms
   and lower-priority transitions. Eliminates the per-frame composite churn
   that flickered on weak GPUs. The class clears ~140ms after the last scroll. */
html.wx-scrolling .wx-work,
html.wx-scrolling .wx-d2p-bento-card,
html.wx-scrolling [data-cap-card],
html.wx-scrolling .wx-figma,
html.wx-scrolling .wx-d2p-logos li,
html.wx-scrolling .wx-pill,
html.wx-scrolling .wx-d2p-pill{transition:none!important;animation-play-state:paused!important}
html.wx-scrolling .wx-mq-track,html.wx-scrolling .wx-d2p-mq-track{animation-play-state:paused}

/* Low-power: trim the card glow/shadow and pause the arrow pulse. */
html.wx-low-power .wx-f2p-card{box-shadow:none!important}
html.wx-low-power .wx-f2p-arrow{animation:none!important}
html.wx-low-power .wx-d2p-bento-card,
html.wx-low-power .wx-d2p-bento-cta,
html.wx-low-power .wx-d2p-bento-svc,
html.wx-low-power .wx-faq,
html.wx-low-power .wx-work,
html.wx-low-power .wx-d2p-logos li{will-change:auto!important;box-shadow:none!important}
html.wx-low-power .wx-d2p-bento-card:hover{transform:none!important;box-shadow:none!important}
html.wx-low-power .wx-d2p-bento-cta:hover .wx-d2p-bento-cta-arrow{transform:none!important}

/* ---------- Accessibility helpers ---------- */
.wx-skip{position:fixed;top:-120px;left:16px;z-index:100001;background:#9D5CFF;color:#0A0A0A;
  padding:12px 20px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;
  transition:top .25s cubic-bezier(.16,1,.3,1)}
.wx-skip:focus{top:16px}
.wx-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}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid #9D5CFF;outline-offset:3px;border-radius:4px}

/* When JS is unavailable (or hasn't booted), never hide reveal content */
.no-js [data-reveal]{opacity:1!important;transform:none!important}

/* ----- Paint perf: let the browser skip layout/paint for off-screen heavy sections.
   Avoid grid containers here (content-visibility:auto can confuse grid track
   sizing at the moment the element enters the viewport). */
#work,#process,#faq{content-visibility:auto;contain-intrinsic-size:1px 900px}

/* ---------- Keyframes ---------- */
@keyframes wx-grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-3%,-2%)}100%{transform:translate(2%,4%)}}
@keyframes wx-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes wx-marquee-rev{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
@keyframes wx-mesh{0%{transform:translate(0,0) scale(1)}33%{transform:translate(6%,-5%) scale(1.15)}66%{transform:translate(-5%,4%) scale(1.05)}100%{transform:translate(0,0) scale(1)}}
@keyframes wx-scrolldot{0%{transform:translateY(0);opacity:1}70%{opacity:1}100%{transform:translateY(22px);opacity:0}}
@keyframes wx-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.4}}
@keyframes wx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes wx-spin{to{transform:rotate(360deg)}}

/* ---------- Animated underline links ---------- */
.wx-uline{position:relative}
.wx-uline::after{content:'';position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.wx-uline:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Selected-work cards (home) ---------- */
.wx-work:hover .wx-work-img{transform:scale(1.06)}
.wx-work:hover .wx-work-rgb{opacity:.55}
.wx-work:hover .wx-work-meta{transform:translateY(0);opacity:1}

/* ---------- Project rows (work) - name rolls up, violet copy rolls in from below ---------- */
.wx-row{transition:padding-left .5s cubic-bezier(.16,1,.3,1)}
.wx-row:hover{padding-left:clamp(10px,2vw,40px)}
.wx-row:hover .wx-row-arrow{opacity:1;transform:translateX(0)}
.wx-row-name{position:relative;display:block;overflow:hidden;line-height:1.15;color:transparent}
.wx-row-name::before,.wx-row-name::after{content:attr(data-text);position:absolute;left:0;top:0;white-space:nowrap;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.wx-row-name::before{color:#EDEDED}
.wx-row-name::after{color:#9D5CFF;transform:translateY(115%)}
.wx-row:hover .wx-row-name::before{transform:translateY(-115%)}
.wx-row:hover .wx-row-name::after{transform:translateY(0)}

/* ---------- Team cards (studio) ---------- */
.wx-team:hover .wx-team-img{filter:grayscale(0);transform:scale(1.04)}

/* ---------- Form fields (contact) ---------- */
input::placeholder,textarea::placeholder{color:#5A5A62}
input:focus,textarea:focus{outline:none;border-color:#9D5CFF !important}

/* ---------- FAQ accordion (SEO content) - rounded cards, morphing icon, JS-animated height ---------- */
.wx-faq{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:#0E0E12;margin-bottom:14px;overflow:hidden;transition:border-color .4s ease,background .4s ease,box-shadow .4s ease}
.wx-faq:hover{border-color:rgba(255,255,255,.18)}
.wx-faq[open]{border-color:rgba(157,92,255,.45);background:#100b18;box-shadow:0 20px 50px -30px rgba(157,92,255,.55)}
.wx-faq[open]:hover{border-color:rgba(157,92,255,.6)}
.wx-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(20px,2.6vh,28px) clamp(20px,3vw,34px);font-size:clamp(17px,1.7vw,23px);font-weight:600;letter-spacing:-.02em;color:#EDEDED;transition:color .3s ease}
.wx-faq summary::-webkit-details-marker{display:none}
.wx-faq summary:hover{color:#fff}
.wx-faq[open] summary{color:#fff}
.wx-faq-ico{position:relative;flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);transition:transform .45s cubic-bezier(.16,1,.3,1),background .35s ease,border-color .35s ease}
.wx-faq-ico::before,.wx-faq-ico::after{content:'';position:absolute;left:50%;top:50%;width:13px;height:2px;border-radius:2px;background:#9D5CFF;transform:translate(-50%,-50%);transition:transform .45s cubic-bezier(.16,1,.3,1),background .35s ease}
.wx-faq-ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.wx-faq summary:hover .wx-faq-ico{border-color:rgba(157,92,255,.65)}
.wx-faq[open] .wx-faq-ico{transform:rotate(135deg);background:#9D5CFF;border-color:#9D5CFF}
.wx-faq[open] .wx-faq-ico::before,.wx-faq[open] .wx-faq-ico::after{background:#0A0A0A}
.wx-faq-body{padding:0 clamp(20px,3vw,34px) clamp(22px,2.8vh,30px);max-width:840px;font-size:clamp(15px,1.15vw,17px);line-height:1.7;color:#9A9AA2}
.wx-faq-body a{color:#9D5CFF;text-decoration:none}
.wx-faq-body a:hover{text-decoration:underline}

/* ---------- Capability cards: cursor-tracking spotlight ---------- */
[data-cap-card]{--mx:50%;--my:50%}
[data-cap-card]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .45s ease;background:radial-gradient(circle 520px at var(--mx) var(--my),rgba(157,92,255,.16),transparent 60%)}
@media (pointer:fine){[data-cap-card]:hover::after{opacity:1}}

/* ---------- Selected-work cards: 3D tilt ---------- */
.wx-work{will-change:transform}

/* ---------- Figma → Production tiles (legacy) ---------- */
.wx-figma:hover{border-color:rgba(157,92,255,.5)!important;background:#100b18!important;transform:translateY(-3px)}

/* ====================================================================
   DESIGN → PRODUCTION - modern interactive section
   ==================================================================== */

/* ---------- Marquees ---------- */
.wx-d2p-marquees{margin-top:clamp(40px,6vh,64px);display:flex;flex-direction:column;gap:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.wx-d2p-mq-row{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:16px 0;border-top:1px solid rgba(255,255,255,.08)}
.wx-d2p-mq-label{font-family:'Satoshi', sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7A7A82;padding-left:clamp(4px,1vw,12px);white-space:nowrap}
.wx-d2p-mq{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.wx-d2p-mq-track{display:flex;gap:36px;width:max-content;animation:wx-d2p-mq 32s linear infinite;will-change:transform}
.wx-d2p-mq-track-rev{animation-direction:reverse;animation-duration:38s}
.wx-d2p-mq:hover .wx-d2p-mq-track{animation-play-state:paused}
.wx-d2p-mq-track span{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:#C8C8D0;white-space:nowrap;letter-spacing:-.005em;transition:color .25s ease,transform .25s ease}
.wx-d2p-mq-track span:hover{color:#fff;transform:translateY(-1px)}
.wx-d2p-mq-track img{width:26px;height:26px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
@keyframes wx-d2p-mq{to{transform:translateX(-25%)}}

/* ---------- Bento: Custom Builds ---------- */
.wx-d2p-bento{margin-top:clamp(56px,9vh,104px);padding-top:clamp(48px,7vh,80px);border-top:1px solid rgba(255,255,255,.09);display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:auto auto;gap:16px;max-width:100%}
.wx-d2p-bento-card{position:relative;min-width:0;padding:clamp(26px,3.4vh,38px) clamp(24px,2.6vw,36px);border-radius:24px;border:1px solid rgba(255,255,255,.06);background:#0B0B0F;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .35s ease}
.wx-d2p-bento-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 50% at 100% 0%,rgba(157,92,255,.12),transparent 60%);opacity:0;transition:opacity .35s ease}
.wx-d2p-bento-card:hover{transform:translateY(-4px);border-color:rgba(157,92,255,.35);box-shadow:0 20px 40px -20px rgba(157,92,255,.15)}
.wx-d2p-bento-card:hover::before{opacity:1}
.wx-d2p-bento-hero{grid-column:1/2;grid-row:1/3;display:flex;flex-direction:column;gap:18px;background:#0B0B0F}
.wx-d2p-bento-eyebrow{position:relative;display:inline-flex;align-items:center;gap:8px;font-family:'Satoshi', sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9D5CFF}
.wx-d2p-bento-eyebrow span{color:#FF6FD8;font-size:10px}
.wx-d2p-bento-title{position:relative;font-size:clamp(28px,3.2vw,48px);font-weight:600;letter-spacing:-.03em;line-height:1.04;margin:0}
.wx-d2p-bento-title em{font-style:normal;font-weight:600;color:#9D5CFF}
.wx-d2p-bento-copy{position:relative;font-size:clamp(14px,1.1vw,17px);line-height:1.6;color:#B8B8C0;margin:0}
.wx-d2p-bento-stack{position:relative;display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}
.wx-d2p-pill{display:inline-block;font-size:12px;font-weight:500;color:#C8C8D0;padding:6px 13px;border-radius:100px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);transition:border-color .3s ease,color .3s ease,background .3s ease}
.wx-d2p-pill:hover{border-color:rgba(157,92,255,.5);color:#fff;background:rgba(157,92,255,.08)}
.wx-d2p-bento-svc{display:flex;flex-direction:column;gap:10px;min-height:clamp(140px,18vh,180px)}
.wx-d2p-bento-num{position:relative;font-family:'Satoshi', sans-serif;font-size:12px;letter-spacing:.1em;color:#9D5CFF}
.wx-d2p-bento-svc h4{position:relative;font-size:clamp(18px,1.7vw,23px);font-weight:600;letter-spacing:-.015em;margin:0}
.wx-d2p-bento-svc p{position:relative;font-size:13.5px;line-height:1.55;color:#9A9AA2;margin:0}

/* CTA card filling the bottom-right bento slot */
.wx-d2p-bento-cta{display:flex;flex-direction:column;gap:10px;min-height:clamp(140px,18vh,180px);text-decoration:none;color:inherit;background:#0B0B0F;border-color:rgba(157,92,255,.2);position:relative}
.wx-d2p-bento-cta::before{background:radial-gradient(70% 60% at 100% 0%,rgba(157,92,255,.2),transparent 65%);opacity:.85}
.wx-d2p-bento-cta:hover{border-color:rgba(157,92,255,.5);box-shadow:0 22px 48px -20px rgba(157,92,255,.3)}
.wx-d2p-bento-cta:hover .wx-d2p-bento-cta-arrow{transform:translate(6px,-6px) scale(1.08)}
.wx-d2p-bento-cta h4{color:#fff}
.wx-d2p-bento-cta p{color:#C8C8D0}
.wx-d2p-bento-cta-arrow{position:absolute;top:clamp(22px,3vh,30px);right:clamp(22px,2.4vw,32px);width:42px;height:42px;border-radius:50%;background:#9D5CFF;color:#0A0A0A;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;transition:transform .45s cubic-bezier(.16,1,.3,1),background .35s ease;box-shadow:0 12px 24px -6px rgba(157,92,255,.55)}

/* ---------- 3D conversion ring: Figma → platform ---------- */
.wx-f2p{margin-top:clamp(36px,6vh,64px);display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,32px)}
.wx-f2p-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Satoshi', sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9D5CFF}
.wx-f2p-eyebrow span{color:#FF6FD8;font-size:10px}
.wx-f2p-stage{width:100%;position:relative}
.wx-f2p-ring{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,24px);width:100%}
.wx-f2p-card{position:relative;box-sizing:border-box;padding:clamp(28px,3vh,36px) clamp(24px,2.5vw,32px);border-radius:24px;border:1px solid rgba(255,255,255,.06);background:#0B0B0F;display:flex;flex-direction:column;gap:16px;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1)}
.wx-f2p-card:hover{transform:translateY(-4px);border-color:rgba(157,92,255,.35);box-shadow:0 20px 40px -20px rgba(157, 92, 255, 0.15)}
.wx-f2p-card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(80% 50% at 50% 0%,rgba(157,92,255,.05),transparent 60%);opacity:0;transition:opacity .4s ease}
.wx-f2p-card:hover::before{opacity:1}
.wx-f2p-route{position:relative;font-family:'Satoshi', sans-serif;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#9D5CFF}
.wx-f2p-flow{position:relative;display:flex;align-items:center;gap:14px;margin:2px 0 2px}
.wx-f2p-flow img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.wx-f2p-arrow{font-size:22px;color:#9D5CFF;animation:wx-f2p-pulse 2.2s ease-in-out infinite}
@keyframes wx-f2p-pulse{0%,100%{opacity:.5;transform:translateX(0)}50%{opacity:1;transform:translateX(4px)}}
.wx-f2p-title{position:relative;font-size:clamp(18px,1.8vw,22px);line-height:1.25;font-weight:600;letter-spacing:-.02em;margin:0;color:#EDEDED}
.wx-f2p-desc{position:relative;font-size:13.5px;line-height:1.6;color:#8A8A92;margin:0}
.wx-f2p-caption{font-family:'Satoshi', sans-serif;font-size:12px;letter-spacing:.04em;color:#7A7A82;text-align:center;max-width:560px;margin:0}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .wx-d2p-bento{grid-template-columns:1fr 1fr}
  .wx-d2p-bento-hero{grid-column:1/3;grid-row:auto}
}
@media (max-width:860px){
  .wx-d2p-mq-row{grid-template-columns:1fr;gap:8px}
  .wx-d2p-mq-label{padding-left:0}
}
@media (max-width:600px){
  .wx-d2p-bento{grid-template-columns:1fr}
  .wx-d2p-bento-hero{grid-column:auto}
}

/* Card grid steps down cleanly: 5 across → 3 → 2 → 1. */
@media (max-width:1180px){.wx-f2p-ring{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.wx-f2p-ring{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.wx-f2p-ring{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){
  .wx-d2p-mq-track{animation:none!important}
  .wx-f2p-arrow{animation:none}
}

/* ---------- Responsive polish (was injected by the runtime) ---------- */
@media (max-width:820px){
  [data-cap-card]{grid-template-columns:1fr !important}
  [data-cap-media]{max-width:520px;width:100%}
}
@media (max-width:600px){
  [data-header]{padding:14px 20px !important}
  .wx-row{grid-template-columns:28px 1fr auto !important;gap:14px !important}
  .wx-faq .wx-faq-body{padding-right:0}
  /* let capability headings flow on one line instead of a forced 2-line break */
  [data-cap-card] h3 br{display:none}
}

/* ====================================================================
   BLOG / ARTICLE - long-form prose, callouts, index cards
   ==================================================================== */

/* ---------- Article prose typography ---------- */
.wx-prose{max-width:760px;margin:0 auto;font-size:clamp(16px,1.2vw,19px);line-height:1.78;color:#C2C2CA}
.wx-prose>*+*{margin-top:1.4em}
.wx-prose h2{font-size:clamp(26px,3.4vw,42px);font-weight:600;letter-spacing:-.025em;line-height:1.14;color:#EDEDED;margin-top:1.9em;scroll-margin-top:110px}
.wx-prose h3{font-size:clamp(20px,2.2vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:#EDEDED;margin-top:1.6em}
.wx-prose p{margin:0}
.wx-prose>*+p{margin-top:1.4em}
.wx-prose>h2+*,.wx-prose>h3+*{margin-top:.7em}
.wx-prose a{color:#9D5CFF;text-decoration:none;border-bottom:1px solid rgba(157,92,255,.4);transition:border-color .3s ease}
.wx-prose a:hover{border-bottom-color:#9D5CFF}
.wx-prose strong{color:#EDEDED;font-weight:600}
.wx-prose ul,.wx-prose ol{padding-left:1.3em;display:flex;flex-direction:column;gap:.55em}
.wx-prose li{line-height:1.65}
.wx-prose li::marker{color:#9D5CFF}
.wx-prose blockquote{margin:0;border-left:2px solid #9D5CFF;padding-left:clamp(20px,2.4vw,30px);font-size:clamp(20px,2.4vw,28px);line-height:1.4;font-weight:500;color:#EDEDED;letter-spacing:-.02em}
.wx-prose figure{margin:0}
.wx-prose hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:2.2em 0}
.wx-prose-lead{font-size:clamp(19px,1.7vw,25px);line-height:1.5;color:#D8D8DE;font-weight:400;letter-spacing:-.01em}

/* table for comparison posts */
.wx-prose table{width:100%;border-collapse:collapse;font-size:clamp(14px,1.05vw,16px)}
.wx-prose th,.wx-prose td{text-align:left;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1);vertical-align:top}
.wx-prose thead th{font-family:'Satoshi', sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9D5CFF;font-weight:500}
.wx-prose tbody td:first-child{color:#EDEDED;font-weight:500}

/* key takeaway / callout box */
.wx-callout{border:1px solid rgba(157,92,255,.3);background:#100b18;border-radius:18px;padding:clamp(22px,3vw,32px)}
.wx-callout-label{display:block;color:#9D5CFF;font-family:'Satoshi', sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-bottom:12px}
.wx-callout p{font-size:clamp(15px,1.15vw,18px);line-height:1.7;color:#D2D2DA;margin:0}

/* in-article CTA strip */
.wx-article-cta{margin-top:2.4em;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:linear-gradient(160deg,#160a24 0%,#0a070f 75%);padding:clamp(28px,4vw,44px);text-align:center}
.wx-article-cta h3{margin:0 0 12px!important;font-size:clamp(22px,2.6vw,32px);font-weight:600;letter-spacing:-.025em;color:#EDEDED}
.wx-article-cta p{margin:0 0 24px;color:#9A9AA2;font-size:clamp(15px,1.1vw,17px);line-height:1.6}
.wx-article-cta a:not(.wx-btn-animated){display:inline-flex;align-items:center;gap:12px;background:#9D5CFF;color:#0A0A0A;text-decoration:none;padding:15px 28px;border-radius:100px;font-size:15px;font-weight:600;border:0}

/* ---------- Blog index cards ---------- */
.wx-blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:clamp(20px,2.6vw,34px)}
.wx-blog-card{position:relative;display:flex;flex-direction:column;background:#0E0E12;border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:clamp(26px,3vw,40px);text-decoration:none;color:inherit;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .35s ease}
.wx-blog-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 50% at 100% 0%,rgba(157,92,255,.12),transparent 60%);opacity:0;transition:opacity .35s ease}
.wx-blog-card:hover{transform:translateY(-4px);border-color:rgba(157,92,255,.45);box-shadow:0 22px 50px -28px rgba(157,92,255,.5)}
.wx-blog-card:hover::before{opacity:1}
.wx-blog-cat{position:relative;font-family:'Satoshi', sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9D5CFF;margin-bottom:18px}
.wx-blog-card h2,.wx-blog-card h3{position:relative;font-size:clamp(21px,2.1vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-bottom:14px}
.wx-blog-card p{position:relative;font-size:15px;line-height:1.6;color:#9A9AA2;margin-bottom:24px}
.wx-blog-meta{position:relative;margin-top:auto;font-family:'Satoshi', sans-serif;font-size:12px;color:#7A7A82;display:flex;justify-content:space-between;align-items:center;gap:16px}
.wx-blog-arrow{color:#9D5CFF;font-size:18px;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.wx-blog-card:hover .wx-blog-arrow{transform:translateX(5px)}
.wx-blog-card-feat{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,60px);background:linear-gradient(160deg,#140a20 0%,#0a070f 70%)}
.wx-blog-card-feat>div{flex:1 1 340px;min-width:0}
.wx-blog-card-feat h2{font-size:clamp(26px,3.4vw,44px);line-height:1.1}
.wx-blog-card-feat p{font-size:clamp(15px,1.2vw,18px)}

/* card thumbnail image */
.wx-blog-card-media{position:relative;margin:calc(-1 * clamp(26px,3vw,40px)) calc(-1 * clamp(26px,3vw,40px)) clamp(20px,2.2vw,26px);aspect-ratio:16/9;overflow:hidden;background:#12121a}
.wx-blog-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.wx-blog-card:hover .wx-blog-card-media img{transform:scale(1.05)}
.wx-blog-card-feat .wx-blog-card-media{flex:1 1 320px;min-width:0;margin:0;border-radius:16px;aspect-ratio:16/10}

/* ---------- Related posts (end of article) ---------- */
.wx-related{max-width:1200px;margin:0 auto;padding:clamp(30px,6vh,72px) clamp(20px,5vw,72px) clamp(10px,2vh,24px);border-top:1px solid rgba(255,255,255,.1)}
.wx-related-label{font-family:'Satoshi', sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9A9AA2;margin-bottom:clamp(22px,3vh,34px)}

@media (max-width:600px){
  .wx-prose blockquote{padding-left:18px}
  .wx-blog-card-feat{flex-direction:column;align-items:stretch}
  .wx-blog-card-feat .wx-blog-card-media{margin:calc(-1 * clamp(26px,3vw,40px)) calc(-1 * clamp(26px,3vw,40px)) clamp(20px,2.2vw,26px);border-radius:0;aspect-ratio:16/9}
}

/* ---------- Multilingual greeting preloader ----------
   Styling lives here (loaded in <head>) so the loader is fully styled the
   instant the deferred JS injects it - no flash of unstyled overlay. The
   word text is set by JS; non-Latin scripts (Hindi/Japanese/Arabic/Punjabi)
   fall back to the system UI font, so no extra web-font request is made. */
.wx-greet-word{display:flex;align-items:center;gap:.42em;font-family:'Satoshi',sans-serif;
  font-weight:600;font-size:clamp(38px,8vw,104px);letter-spacing:-.03em;line-height:1;color:#EDEDED;
  white-space:nowrap;will-change:opacity,transform}
.wx-greet-word::before{content:'';flex:0 0 auto;width:.32em;height:.32em;border-radius:50%;
  background:#9D5CFF;box-shadow:0 0 26px #9D5CFF;transform:translateY(.03em)}

/* ---------- Respect reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important;transform:none !important}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ============================================================
   COSMOS-STYLE HERO SECTION (Orbiting UX Designs & Text)
   ============================================================ */

.hero-orbit-section {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px 20px;
  background: #000000;
}

/* Center Content: Brand Title & Headline */
.hero-center-content {
  position: relative;
  z-index: 10;
  text-align: center;
  pointer-events: none;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.5vh, 24px);
}

/* The Orbiting Canvas/Gallery Container */
.orbit-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.15) 4%, #000 12%, #000 88%, rgba(0,0,0,0.15) 96%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.15) 4%, #000 12%, #000 88%, rgba(0,0,0,0.15) 96%, transparent 100%);
}

/* Orbit circular path container */
.orbit-container {
  position: relative;
  width: 0;
  height: 0;
  will-change: transform;
  pointer-events: auto; /* Enable hover/clicks on cards */
}

/* Orbit keyframe */
@keyframes orbit-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Individual card placement and sizing (supports variable --card-w per track) */
.orbit-card {
  position: absolute;
  width: var(--card-w, clamp(65px, 6.8vw, 110px));
  height: var(--card-h, var(--card-w, clamp(65px, 6.8vw, 110px)));
  /* Centering */
  margin-left: calc(-1 * var(--card-w, clamp(65px, 6.8vw, 110px)) / 2);
  margin-top: calc(-1 * var(--card-h, var(--card-w, clamp(65px, 6.8vw, 110px))) / 2);
  
  /* Initial angle and translation radius (custom properties) */
  --radius: clamp(280px, 34vw, 550px);
  transform: rotate(var(--init-angle)) translate(var(--radius));
  will-change: transform;
}

.orbit-track-4 {
  --radius: clamp(760px, 58vw, 920px);
  --card-w: clamp(75px, 6vw, 100px);
  --card-h: clamp(95px, 7.6vw, 125px);
}
.orbit-track-3 {
  --radius: clamp(570px, 43vw, 690px);
  --card-w: clamp(65px, 5.2vw, 85px);
  --card-h: clamp(82px, 6.6vw, 108px);
}
.orbit-track-2 {
  --radius: clamp(380px, 29vw, 460px);
  --card-w: clamp(55px, 4.4vw, 70px);
  --card-h: clamp(70px, 5.6vw, 88px);
}
.orbit-track-1 {
  --radius: clamp(210px, 16vw, 250px);
  --card-w: clamp(45px, 3.6vw, 55px);
  --card-h: clamp(57px, 4.6vw, 70px);
}

/* Rotator that cancels parent rotate (Disabled to let cards rotate with circle) */
.orbit-card-rotator {
  width: 100%;
  height: 100%;
}

/* Inner card that holds the static tilt and styles */
.orbit-card-inner {
  width: 100%;
  height: 100%;
  transform: rotate(var(--tilt-angle, 0deg));
  border-radius: clamp(14px, 1.2vw, 24px);
  overflow: hidden;
  background: #141416;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.85);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
  cursor: pointer;
  pointer-events: auto;
}

.orbit-card-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Hover effects (Lifts cards radially outwards) */
.orbit-card-inner:hover {
  transform: rotate(var(--tilt-angle, 0deg)) scale(1.1) translateY(-4px);
  border-color: rgba(157, 92, 255, 0.5);
  box-shadow: 0 15px 35px -10px rgba(157, 92, 255, 0.4);
  z-index: 100;
}

.orbit-card-inner:hover img {
  transform: scale(1.06);
  opacity: 1;
}

/* Desktop hero orbit: enlarge every thumbnail ~13px (keeps centring) */
@media (min-width: 769px) {
  .hero-orbit-section .orbit-card {
    width: calc(var(--card-w, 100px) + 13px);
    height: calc(var(--card-h, var(--card-w, 100px)) + 13px);
    margin-left: calc((var(--card-w, 100px) + 13px) / -2);
    margin-top: calc((var(--card-h, var(--card-w, 100px)) + 13px) / -2);
  }
}

/* Responsive adjustments for smaller viewports */
@media (max-width: 768px) {
  .orbit-track-4 {
    --radius: clamp(480px, 60vw, 680px);
    --card-w: clamp(55px, 7vw, 75px);
    --card-h: clamp(72px, 9.2vw, 98px);
  }
  .orbit-track-3 {
    --radius: clamp(360px, 45vw, 510px);
    --card-w: clamp(48px, 6vw, 65px);
    --card-h: clamp(63px, 8vw, 85px);
  }
  .orbit-track-2 {
    --radius: clamp(240px, 30vw, 340px);
    --card-w: clamp(40px, 5vw, 55px);
    --card-h: clamp(52px, 6.5vw, 72px);
  }
  .orbit-track-1 {
    --radius: clamp(140px, 18vw, 200px);
    --card-w: clamp(32px, 4vw, 45px);
    --card-h: clamp(42px, 5.2vw, 58px);
  }
}

@media (max-width: 480px) {
  .orbit-track-4 {
    --radius: clamp(285px, 70vw, 380px);
    --card-w: clamp(38px, 9vw, 46px);
    --card-h: clamp(50px, 12vw, 60px);
  }
  .orbit-track-3 {
    --radius: clamp(195px, 47vw, 270px);
    --card-w: clamp(32px, 7.5vw, 40px);
    --card-h: clamp(42px, 10vw, 52px);
  }
  .orbit-track-2 {
    --radius: clamp(145px, 35vw, 200px);
    --card-w: clamp(26px, 6.2vw, 34px);
    --card-h: clamp(34px, 8.1vw, 44px);
  }
  .orbit-track-1 {
    --radius: clamp(95px, 23vw, 130px);
    --card-w: clamp(20px, 4.8vw, 26px);
    --card-h: clamp(26px, 6.2vw, 34px);
  }
  .hero-orbit-section {
    padding-top: 140px;
  }
}

/* Mobile hero orbit: larger thumbnails + tighter 15px corners */
@media (max-width: 768px) {
  .hero-orbit-section .orbit-card {
    width: calc(var(--card-w) + 18px);
    height: calc(var(--card-h, var(--card-w)) + 18px);
    margin-left: calc((var(--card-w) + 18px) / -2);
    margin-top: calc((var(--card-h, var(--card-w)) + 18px) / -2);
  }
  .hero-orbit-section .orbit-card-inner {
    border-radius: 15px;
  }
  /* Reduce clutter on mobile: hide the two inner rings entirely, then thin
     each outer ring by half — hiding alternate cards keeps the survivors
     evenly spaced (track-4 at 60deg, track-3 at 72deg) so they stay aligned */
  .hero-orbit-section .orbit-track-1,
  .hero-orbit-section .orbit-track-2,
  .hero-orbit-section .orbit-track-4:nth-child(even),
  .hero-orbit-section .orbit-track-3:nth-child(even) {
    display: none;
  }
}

/* Premium Interactive CTA Buttons */
.wx-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #9D5CFF;
  color: #FFFFFF !important;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 8px 24px -8px rgba(157, 92, 255, 0.5);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, box-shadow 0.3s ease;
}

.wx-btn-primary:hover {
  background: #8A46EB;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 15px 30px -10px rgba(157, 92, 255, 0.65);
}

.wx-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #EDEDED !important;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.wx-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(157, 92, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(255, 255, 255, 0.08);
}

@keyframes wx-btn-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(157,92,255,0); }
  50%       { box-shadow: 0 0 20px 5px rgba(157,92,255,0.20); }
}

.wx-btn-animated {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 6px;
  background: #ffffff;
  border-radius: 100px;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  animation: wx-btn-glow 3s ease-in-out infinite;
  width: fit-content;
  border: none;
}
.wx-btn-animated .wx-btn-label {
  font-size: 15px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  font-family: 'Satoshi', sans-serif;
  letter-spacing: 0.01em;
  padding: 0 16px 0 20px;
  transition: opacity 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
              max-width 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
              padding 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 180px;
  overflow: hidden;
  display: block;
}
.wx-btn-animated .wx-btn-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #9D5CFF;
  border-radius: 100px;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  transition: width 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.2s ease;
  overflow: hidden;
}
.wx-btn-animated .wx-btn-arrow {
  flex-shrink: 0;
  transition: width 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Hover: text slides out, circle fills pill */
.wx-btn-animated:hover .wx-btn-label {
  opacity: 0;
  transform: translateX(-12px);
  max-width: 0;
  padding: 0;
}
.wx-btn-animated:hover .wx-btn-circle {
  width: 170px;
  background: #8A46EB;
}
.wx-btn-animated:hover .wx-btn-arrow {
  width: 30px;
}

.wx-testimonial-marquee {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: wx-marquee-testimonials 55s linear infinite;
  will-change: transform;
}

@keyframes wx-marquee-testimonials {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-25%);
  }
}