/* Xstudios Modern Client Theme v5
   Visual direction intentionally follows xstudios_modern_bootstrap_homepage.html,
   while preserving the richer v4 navigation, client-facing content and light/dark support. */

:root {
  --xm-bg:#f5f7fb;
  --xm-bg-soft:#edf2f7;
  --xm-panel:rgba(255,255,255,.78);
  --xm-panel-strong:rgba(255,255,255,.94);
  --xm-border:rgba(16,32,52,.11);
  --xm-text:#102034;
  --xm-muted:#68788c;
  --xm-primary:#6758ed;
  --xm-primary-2:#2aa8e8;
  --xm-accent:#65b83f;
  --xm-shadow:0 24px 72px rgba(29,54,88,.10);
  --xm-radius:28px;
}
html[data-theme="dark"]{
  --xm-bg:#07090d;
  --xm-bg-soft:#0c1017;
  --xm-panel:rgba(255,255,255,.052);
  --xm-panel-strong:rgba(13,18,26,.88);
  --xm-border:rgba(255,255,255,.115);
  --xm-text:#f5f7fb;
  --xm-muted:#9faaba;
  --xm-primary:#7c5cff;
  --xm-primary-2:#35d0ff;
  --xm-accent:#86f7c1;
  --xm-shadow:0 24px 80px rgba(0,0,0,.38);
}
html,body{background:var(--xm-bg)!important;color:var(--xm-text)}
body{
  background:
    radial-gradient(circle at 15% 7%,color-mix(in srgb,var(--xm-primary) 14%,transparent),transparent 31rem),
    radial-gradient(circle at 88% 9%,color-mix(in srgb,var(--xm-primary-2) 10%,transparent),transparent 28rem),
    var(--xm-bg)!important;
}

/* Floating header: closer to the modern Xstudios concept, while keeping the mega-menu. */
.site-header{background:transparent!important;border:0!important;box-shadow:none!important;padding:14px 14px 0;position:sticky;top:0;z-index:1045;backdrop-filter:none!important}
.site-header>.xs-container{width:min(1320px,100%)!important;max-width:1320px!important}
.header-card{
  min-height:68px;
  padding:.48rem .58rem .48rem .85rem!important;
  border:1px solid var(--xm-border)!important;
  border-radius:24px!important;
  background:color-mix(in srgb,var(--xm-panel-strong) 94%,transparent)!important;
  box-shadow:0 12px 44px rgba(0,0,0,.08)!important;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}
.site-header.motion-scrolled .header-card{box-shadow:0 14px 52px rgba(0,0,0,.15)!important;background:color-mix(in srgb,var(--xm-panel-strong) 98%,transparent)!important}
.brand{box-shadow:none!important;background:transparent!important;padding:.2rem .35rem!important}
html[data-theme="dark"] .brand{background:transparent!important;padding:.2rem .35rem!important;box-shadow:none!important}
.xs-nav-trigger{font-size:.79rem!important;padding:.58rem .58rem!important}
.header-cta{padding:.67rem .88rem!important}
.theme-toggle{border-radius:999px!important}
.xs-mega-menu,.xs-dropdown-panel{
  border-radius:22px!important;
  background:var(--xs-theme-menu)!important;
  border-color:var(--xm-border)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.20)!important;
  backdrop-filter:blur(22px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(135%)!important;
}
html[data-theme="light"] .xs-mega-menu,
html[data-theme="light"] .xs-dropdown-panel{background:rgba(255,255,255,.992)!important}
html[data-theme="dark"] .xs-mega-menu,
html[data-theme="dark"] .xs-dropdown-panel{background:rgba(10,14,21,.985)!important}
html[data-theme="dark"] .brand img{filter:brightness(1.10) drop-shadow(0 1px 7px rgba(255,255,255,.06))}

/* Global pages: keep the richer client content, but remove the XTND-like blocky section feel. */
.content-section{background:transparent!important;border-top-color:var(--xm-border)!important}
.content-section.alt{background:linear-gradient(180deg,color-mix(in srgb,var(--xm-bg-soft) 58%,transparent),transparent)!important}
.page-hero-card,.rich-card,.service-index-card,.split-panel,.route-card,.outcome-band,.mini-step,.inline-callout,.contact-route,.form-shell,.stack-table{
  border-color:var(--xm-border)!important;
  background:linear-gradient(145deg,var(--xm-panel),color-mix(in srgb,var(--xm-panel) 65%,transparent))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.page-hero-card,.split-panel{box-shadow:var(--xm-shadow)!important}
.page-hero-card{border-radius:34px!important}
.rich-card,.service-index-card,.route-card,.mini-step{border-radius:24px!important}
.rich-card:hover,.service-index-card:hover,.route-card:hover{border-color:color-mix(in srgb,var(--xm-primary) 35%,var(--xm-border))!important}
.section-kicker{border-radius:999px!important}
.cta-section{background:transparent!important}
.cta-box{
  border-radius:36px!important;
  border-color:var(--xm-border)!important;
  background:
    radial-gradient(circle at 85% 20%,color-mix(in srgb,var(--xm-primary-2) 18%,transparent),transparent 20rem),
    radial-gradient(circle at 10% 85%,color-mix(in srgb,var(--xm-primary) 22%,transparent),transparent 24rem),
    linear-gradient(135deg,var(--xm-panel),color-mix(in srgb,var(--xm-panel) 56%,transparent))!important;
}

/* Homepage modern structure */
.home-modern main{overflow:clip}
.home-modern .xm-section{padding:110px 0;position:relative;border-top:1px solid var(--xm-border)}
.home-modern .xm-section.no-border{border-top:0}
.home-modern .xm-section.xm-soft{background:linear-gradient(180deg,color-mix(in srgb,var(--xm-bg-soft) 48%,transparent),transparent)}
.home-modern .xm-container{width:min(1320px,calc(100% - 34px));margin-inline:auto}
.home-modern .xm-tag{display:inline-flex;align-items:center;gap:.55rem;padding:.48rem .8rem;border:1px solid var(--xm-border);border-radius:999px;background:color-mix(in srgb,var(--xm-panel) 72%,transparent);color:var(--xm-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:750}
.home-modern .xm-tag:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--xm-accent);box-shadow:0 0 16px color-mix(in srgb,var(--xm-accent) 72%,transparent)}
.home-modern .xm-display{font-size:clamp(3.35rem,6.9vw,7.1rem);line-height:.90;letter-spacing:-.065em;font-weight:790;margin:1.35rem 0 1.45rem;max-width:1120px}
.home-modern .xm-title{font-size:clamp(2.4rem,4.8vw,5rem);line-height:.98;letter-spacing:-.05em;font-weight:760;margin:0}
.home-modern .xm-gradient{background:linear-gradient(95deg,var(--xm-text) 0%,color-mix(in srgb,var(--xm-text) 78%,var(--xm-primary-2)) 32%,var(--xm-primary) 65%,var(--xm-primary-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="dark"] .home-modern .xm-gradient{background:linear-gradient(95deg,#fff 0%,#cfd8ff 34%,#8e7cff 63%,#53dbff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-modern .xm-muted{color:var(--xm-muted)!important}

.home-modern .xm-hero{min-height:calc(100svh - 10px);display:flex;align-items:center;position:relative;overflow:hidden;padding:118px 0 84px;margin-top:-82px;padding-top:190px;border:0}
.home-modern .xm-hero-grid{position:absolute;inset:-10% -10% -20%;opacity:.16;background-image:linear-gradient(color-mix(in srgb,var(--xm-text) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--xm-text) 7%,transparent) 1px,transparent 1px);background-size:62px 62px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 82%);transform:perspective(900px) rotateX(67deg) scale(1.9) translateY(8%);transform-origin:center bottom;pointer-events:none}
.home-modern .xm-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(1px)}
.home-modern .xm-orb.one{width:520px;height:520px;top:8%;right:-180px;background:radial-gradient(circle at 36% 38%,color-mix(in srgb,var(--xm-primary-2) 52%,transparent),color-mix(in srgb,var(--xm-primary) 20%,transparent) 40%,transparent 70%)}
.home-modern .xm-orb.two{width:380px;height:380px;left:-170px;bottom:3%;background:radial-gradient(circle,color-mix(in srgb,var(--xm-primary) 35%,transparent),transparent 70%)}
.home-modern .xm-hero-copy{position:relative;z-index:2;max-width:1100px}
.home-modern .xm-lead{max-width:790px;color:var(--xm-muted);font-size:clamp(1.08rem,1.65vw,1.34rem);line-height:1.68}
.home-modern .xm-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.home-modern .xm-btn-primary,.home-modern .xm-btn-ghost{display:inline-flex;align-items:center;gap:.5rem;padding:.86rem 1.28rem;border-radius:999px;text-decoration:none;font-weight:720;border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.home-modern .xm-btn-primary{color:#fff;background:linear-gradient(110deg,var(--xm-primary),#6b7cff 50%,var(--xm-primary-2));box-shadow:0 10px 35px color-mix(in srgb,var(--xm-primary) 30%,transparent)}
.home-modern .xm-btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 42px color-mix(in srgb,var(--xm-primary) 40%,transparent)}
.home-modern .xm-btn-ghost{color:var(--xm-text);border-color:var(--xm-border);background:color-mix(in srgb,var(--xm-panel) 68%,transparent)}
.home-modern .xm-btn-ghost:hover{color:var(--xm-text);border-color:color-mix(in srgb,var(--xm-text) 22%,transparent);background:var(--xm-panel)}
.home-modern .xm-proof{margin-top:3.3rem;padding-top:1.55rem;border-top:1px solid var(--xm-border);display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;max-width:1010px}
.home-modern .xm-proof strong{display:block;font-size:1.25rem;letter-spacing:-.03em}.home-modern .xm-proof span{display:block;color:var(--xm-muted);font-size:.8rem;margin-top:.2rem;line-height:1.45}
.home-modern .xm-scroll-hint{position:absolute;right:34px;bottom:28px;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--xm-muted);opacity:.64;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;display:flex;gap:.7rem;align-items:center}.home-modern .xm-scroll-hint:before{content:"";width:1px;height:48px;background:linear-gradient(transparent,color-mix(in srgb,var(--xm-text) 50%,transparent))}

.home-modern .xm-marquee-wrap{overflow:hidden;border-top:1px solid var(--xm-border);border-bottom:1px solid var(--xm-border);background:color-mix(in srgb,var(--xm-panel) 30%,transparent)}
.home-modern .xm-marquee{display:flex;width:max-content;gap:2.6rem;padding:1.05rem 0;animation:xm-marquee 30s linear infinite}.home-modern .xm-marquee span{color:var(--xm-muted);white-space:nowrap;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}.home-modern .xm-marquee strong{color:color-mix(in srgb,var(--xm-text) 82%,var(--xm-muted));font-weight:650}@keyframes xm-marquee{to{transform:translateX(-50%)}}

.home-modern .xm-section-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:clamp(28px,6vw,90px);align-items:end;margin-bottom:3.2rem}.home-modern .xm-section-head p{margin:0;color:var(--xm-muted);font-size:1rem;line-height:1.72}
.home-modern .xm-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.home-modern .xm-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.home-modern .xm-card{height:100%;padding:1.55rem;border:1px solid var(--xm-border);border-radius:var(--xm-radius);background:linear-gradient(145deg,color-mix(in srgb,var(--xm-panel) 94%,transparent),color-mix(in srgb,var(--xm-panel) 42%,transparent));box-shadow:inset 0 1px rgba(255,255,255,.035);transition:transform .28s ease,border-color .28s ease,background .28s ease}.home-modern .xm-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--xm-text) 22%,transparent);background:linear-gradient(145deg,var(--xm-panel),color-mix(in srgb,var(--xm-panel) 58%,transparent))}.home-modern .xm-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;margin-bottom:1.35rem;color:#fff;background:linear-gradient(135deg,var(--xm-primary),var(--xm-primary-2));box-shadow:0 12px 32px color-mix(in srgb,var(--xm-primary) 22%,transparent);font-size:1.15rem}.home-modern .xm-card h3{font-size:1.22rem;letter-spacing:-.025em;margin:0 0 .7rem}.home-modern .xm-card p{color:var(--xm-muted);line-height:1.68;font-size:.94rem;margin:0}.home-modern .xm-link{margin-top:1.3rem;display:inline-flex;gap:.48rem;align-items:center;color:color-mix(in srgb,var(--xm-text) 88%,var(--xm-primary));text-decoration:none;font-size:.87rem;font-weight:720}.home-modern .xm-link i{transition:transform .2s}.home-modern .xm-link:hover i{transform:translateX(4px)}

.home-modern .xm-feature{border:1px solid var(--xm-border);border-radius:34px;overflow:hidden;background:color-mix(in srgb,var(--xm-panel) 62%,transparent);box-shadow:var(--xm-shadow)}
.home-modern .xm-console{min-height:470px;position:relative;overflow:hidden;padding:28px;background:radial-gradient(circle at 80% 20%,rgba(53,208,255,.14),transparent 18rem),radial-gradient(circle at 20% 80%,rgba(124,92,255,.18),transparent 20rem),#090d14}
.home-modern .xm-console-window{position:absolute;inset:54px 36px 36px;border:1px solid rgba(255,255,255,.11);border-radius:22px;background:rgba(5,8,12,.82);box-shadow:0 35px 80px rgba(0,0,0,.35);transform:perspective(900px) rotateY(-7deg) rotateX(3deg);overflow:hidden}.home-modern .xm-console-top{height:42px;display:flex;align-items:center;gap:7px;padding:0 15px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025)}.home-modern .xm-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}.home-modern .xm-console-body{padding:24px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.77rem;line-height:1.78;color:#9facbb}.home-modern .xm-console-body .green{color:#79e6b1}.home-modern .xm-console-body .blue{color:#78d7ff}.home-modern .xm-console-body .purple{color:#aa92ff}.home-modern .xm-console-body .white{color:#e7edf7}.home-modern .xm-feature-copy{padding:clamp(32px,5vw,64px);height:100%;display:flex;flex-direction:column;justify-content:center}.home-modern .xm-checks{display:grid;gap:.9rem;margin:1.5rem 0 0;padding:0;list-style:none}.home-modern .xm-checks li{display:flex;align-items:flex-start;gap:.7rem;color:color-mix(in srgb,var(--xm-text) 76%,var(--xm-muted));line-height:1.55}.home-modern .xm-checks i{color:var(--xm-accent);margin-top:.12rem}

.home-modern .xm-ecosystem{display:grid;grid-template-columns:1.35fr .825fr .825fr;gap:18px}.home-modern .xm-ecosystem .xm-card:first-child{padding:clamp(28px,4vw,46px)}.home-modern .xm-brand-chip{display:inline-flex;padding:.35rem .58rem;border-radius:999px;border:1px solid var(--xm-border);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--xm-muted);font-weight:780}.home-modern .xm-ecosystem h3{font-size:clamp(1.55rem,2.5vw,2.5rem);margin:.9rem 0 .8rem;letter-spacing:-.04em}.home-modern .xm-ecosystem .xm-card:not(:first-child) h3{font-size:1.55rem}.home-modern .xm-ecosystem .xm-card:first-child{background:radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--xm-primary) 15%,transparent),transparent 15rem),linear-gradient(145deg,color-mix(in srgb,var(--xm-panel) 94%,transparent),color-mix(in srgb,var(--xm-panel) 42%,transparent))}

.home-modern .xm-step-num{color:color-mix(in srgb,var(--xm-text) 14%,transparent);font-size:clamp(3rem,6vw,5.6rem);font-weight:820;letter-spacing:-.06em;line-height:.88}.home-modern .xm-step h3{font-size:1.35rem;margin:1.25rem 0 .7rem}.home-modern .xm-metrics{border:1px solid var(--xm-border);border-radius:34px;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--xm-primary) 12%,transparent),transparent 25rem),color-mix(in srgb,var(--xm-panel) 56%,transparent);overflow:hidden;display:grid;grid-template-columns:repeat(3,1fr)}.home-modern .xm-metric{padding:2rem 1.4rem;text-align:center}.home-modern .xm-metric+.xm-metric{border-left:1px solid var(--xm-border)}.home-modern .xm-metric strong{font-size:clamp(2.2rem,4vw,4.1rem);font-weight:790;line-height:1;letter-spacing:-.055em}.home-modern .xm-metric span{display:block;color:var(--xm-muted);margin-top:.55rem;font-size:.84rem}

.home-modern .xm-price{position:relative;overflow:hidden;padding:1.85rem}.home-modern .xm-price.featured{border-color:color-mix(in srgb,var(--xm-primary) 52%,var(--xm-border));background:radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--xm-primary-2) 10%,transparent),transparent 14rem),radial-gradient(circle at 0 100%,color-mix(in srgb,var(--xm-primary) 14%,transparent),transparent 16rem),linear-gradient(145deg,color-mix(in srgb,var(--xm-panel) 94%,transparent),color-mix(in srgb,var(--xm-panel) 42%,transparent));box-shadow:0 24px 70px color-mix(in srgb,var(--xm-primary) 14%,transparent)}.home-modern .xm-price .eyebrow{color:var(--xm-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:780}.home-modern .xm-price h3{font-size:1.35rem;margin:.35rem 0 0}.home-modern .xm-price-value{margin:1rem 0;font-size:2.25rem;letter-spacing:-.045em;font-weight:770}.home-modern .xm-price ul{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.72rem}.home-modern .xm-price li{color:var(--xm-muted);display:flex;gap:.6rem;font-size:.9rem}.home-modern .xm-price li i{color:var(--xm-accent)}.home-modern .xm-badge{position:absolute;top:18px;right:18px;padding:.38rem .68rem;border-radius:999px;background:color-mix(in srgb,var(--xm-primary) 15%,transparent);color:color-mix(in srgb,var(--xm-primary) 75%,var(--xm-text));border:1px solid color-mix(in srgb,var(--xm-primary) 28%,transparent);font-size:.69rem;text-transform:uppercase;letter-spacing:.08em;font-weight:760}.home-modern .xm-price-note{color:var(--xm-muted);font-size:.84rem;margin-top:1.2rem;line-height:1.6}

.home-modern .xm-quote{padding:2rem}.home-modern .xm-quote-mark{color:color-mix(in srgb,var(--xm-text) 14%,transparent);font-size:4.5rem;font-family:Georgia,serif;line-height:.6}.home-modern .xm-quote p{font-size:1.02rem;line-height:1.65;margin:1rem 0}.home-modern .xm-quote small{color:var(--xm-muted)}
.home-modern .accordion-item{background:transparent!important;border-color:var(--xm-border)!important}.home-modern .accordion-button{padding:1.3rem 0!important;font-weight:650;background:transparent!important}.home-modern .accordion-button:not(.collapsed){background:transparent!important}.home-modern .accordion-body{padding:0 0 1.4rem!important;line-height:1.7}
.home-modern .xm-cta{border-radius:38px;padding:clamp(2rem,6vw,5rem);position:relative;overflow:hidden;border:1px solid var(--xm-border);background:radial-gradient(circle at 85% 20%,color-mix(in srgb,var(--xm-primary-2) 18%,transparent),transparent 20rem),radial-gradient(circle at 10% 85%,color-mix(in srgb,var(--xm-primary) 24%,transparent),transparent 24rem),linear-gradient(135deg,color-mix(in srgb,var(--xm-panel) 88%,transparent),color-mix(in srgb,var(--xm-panel) 38%,transparent));box-shadow:var(--xm-shadow)}
.home-modern .xm-mobile-cta{display:none}

@media (max-width:1199.98px){.xs-nav-trigger{font-size:.73rem!important;padding:.55rem .42rem!important}.home-modern .xm-grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:991.98px){.site-header{padding:10px 10px 0}.header-card{border-radius:20px!important}.home-modern .xm-hero{min-height:auto;margin-top:-76px;padding-top:170px}.home-modern .xm-proof{grid-template-columns:repeat(2,1fr)}.home-modern .xm-section-head{grid-template-columns:1fr}.home-modern .xm-grid-3{grid-template-columns:1fr}.home-modern .xm-ecosystem{grid-template-columns:1fr}.home-modern .xm-console{min-height:390px}.home-modern .xm-console-window{inset:40px 22px 24px;transform:none}.home-modern .xm-metrics{grid-template-columns:1fr}.home-modern .xm-metric+.xm-metric{border-left:0;border-top:1px solid var(--xm-border)}.home-modern .xm-scroll-hint{display:none}}
@media (max-width:767.98px){.home-modern .xm-section{padding:78px 0}.home-modern .xm-container{width:min(100% - 20px,1320px)}.home-modern .xm-display{font-size:clamp(3rem,14vw,5.3rem)}.home-modern .xm-grid-4{grid-template-columns:1fr}.home-modern .xm-actions a{width:100%;justify-content:center}.home-modern .xm-feature{border-radius:26px}.home-modern .xm-console{min-height:330px}.home-modern .xm-console-window{inset:28px 14px 16px}.home-modern .xm-console-body{padding:18px;font-size:.68rem}.home-modern .xm-mobile-cta{position:fixed;left:14px;right:14px;bottom:14px;z-index:1040;display:block}.home-modern .xm-mobile-cta a{width:100%;justify-content:center;backdrop-filter:blur(16px)}.home-modern footer{padding-bottom:78px}}
@media (prefers-reduced-motion:reduce){.home-modern .xm-marquee{animation:none!important}.home-modern .xm-card{transition:none!important}}

/* ============================================================
   XSTUDIOS MODERN CLIENT v5.4
   Header/container rhythm + mobile + homepage FAQ refinement
   ============================================================ */

/*
 * One page grid:
 * - full-width translucent header surface
 * - header contents capped to the same 1320px grid as page sections
 * - no nested floating-card inset
 */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1045 !important;
  padding: 0 !important;
  background: color-mix(in srgb, var(--xm-bg) 80%, transparent) !important;
  border-bottom: 1px solid var(--xm-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
}

.site-header.motion-scrolled {
  background: color-mix(in srgb, var(--xm-bg) 96%, transparent) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.07) !important;
}

.site-header > .xs-container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.header-card {
  width: min(1320px, calc(100% - 34px)) !important;
  min-height: 76px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-header.motion-scrolled .header-card {
  background: transparent !important;
  box-shadow: none !important;
}

.brand {
  padding: 0 !important;
}

.brand img {
  display: block;
  width: auto;
  height: 42px !important;
  max-width: 190px;
}

html[data-theme="dark"] .brand img {
  filter: brightness(1.12) drop-shadow(0 1px 7px rgba(255,255,255,.055));
}

/* Keep dropdowns visually separate from the full-width navigation band. */
@media (min-width: 992px) {
  .xs-nav-item > .dropdown-menu {
    margin-top: 12px !important;
  }
}

/* Homepage FAQ: restore proper inner spacing and soften the editorial imbalance. */
.home-modern #faq {
  padding-top: 92px;
  padding-bottom: 92px;
}

.home-modern #faq .xm-title {
  font-size: clamp(2.6rem, 4.15vw, 4.35rem);
  max-width: 560px;
}

.home-modern #faq .accordion {
  display: grid;
  gap: 10px;
}

.home-modern #faq .accordion-item {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--xm-border) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--xm-panel) 42%, transparent) !important;
}

.home-modern #faq .accordion-button {
  min-height: 62px;
  padding: 1.12rem 3.2rem 1.12rem 1.35rem !important;
  line-height: 1.35;
}

.home-modern #faq .accordion-button::after {
  position: absolute;
  right: 1.25rem;
}

.home-modern #faq .accordion-body {
  padding: 0 1.35rem 1.35rem !important;
  line-height: 1.72;
}

/* Consistent 16px mobile page rhythm instead of nested 10px + card insets. */
@media (max-width: 991.98px) {
  .site-header {
    padding: 0 !important;
  }

  .header-card {
    width: 100% !important;
    min-height: 70px !important;
    padding-inline: 16px !important;
    border-radius: 0 !important;
  }

  .brand img {
    height: 38px !important;
    max-width: 176px;
  }

  .header-actions {
    gap: 6px !important;
  }

  .theme-toggle,
  .mobile-menu-btn {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
  }

  .home-modern .xm-hero {
    margin-top: 0 !important;
    padding-top: 92px !important;
  }

  .home-modern #faq {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}

@media (max-width: 767.98px) {
  .home-modern .xm-container,
  .xs-container,
  .section-shell > .xs-container,
  .cta-section > .xs-container,
  .site-footer > .xs-container {
    width: min(1320px, calc(100% - 32px)) !important;
  }

  .site-header > .xs-container {
    width: 100% !important;
  }

  .header-card {
    width: 100% !important;
  }

  .home-modern #faq .xm-title {
    font-size: clamp(2.55rem, 11vw, 3.6rem);
    max-width: 440px;
  }

  .home-modern #faq .accordion-button {
    min-height: 58px;
    padding: 1rem 3rem 1rem 1.1rem !important;
    font-size: .96rem;
  }

  .home-modern #faq .accordion-button::after {
    right: 1.05rem;
  }

  .home-modern #faq .accordion-body {
    padding: 0 1.1rem 1.15rem !important;
  }
}

@media (max-width: 380px) {
  .header-card {
    padding-inline: 14px !important;
  }

  .brand img {
    height: 34px !important;
    max-width: 158px;
  }

  .theme-toggle,
  .mobile-menu-btn {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }
}


/* ============================================================
   XSTUDIOS MODERN CLIENT v5.4
   Canonical 1320px grid + footer/contact containment + richer service content
   ============================================================ */
:root{
  --xs-grid-max:1320px;
  --xs-grid-gutter-desktop:17px;
  --xs-grid-gutter-mobile:16px;
}

/* One authoritative inner grid across header, page content, subnav, CTA and footer. */
.xs-container,
.home-modern .xm-container,
.xs-footer-container{
  width:min(var(--xs-grid-max),calc(100% - (var(--xs-grid-gutter-desktop) * 2)))!important;
  max-width:var(--xs-grid-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.page-hero-xs > .xs-container,
.content-section > .xs-container,
.section-shell > .xs-container,
.cta-section > .xs-container,
.subnav-xs > .xs-container{
  width:min(var(--xs-grid-max),calc(100% - (var(--xs-grid-gutter-desktop) * 2)))!important;
  max-width:var(--xs-grid-max)!important;
  margin-inline:auto!important;
}

/* Custom containers do not have Bootstrap's padding. Neutralize direct row negative
   margins so FAQ/contact rows cannot visually exceed the 1320px grid. Nested rows
   (for example inside a padded form card) retain normal Bootstrap behavior. */
.xs-container > .row,
.home-modern .xm-container > .row,
.xs-footer-container > .row{
  margin-left:0!important;
  margin-right:0!important;
}

/* Footer background remains full width; only the actual footer content is bounded. */
.xs-bootstrap-footer > .xs-footer-container{
  padding-left:0!important;
  padding-right:0!important;
}

/* Prevent wide page modules/tables/forms from forcing a parent beyond the grid. */
.page-hero-card,
.split-panel,
.inline-callout,
.form-shell,
.stack-table,
.table-responsive,
.detail-two-col,
.contact-route-grid,
.rich-grid,
.service-index-grid,
.ecosystem-grid{
  min-width:0;
  max-width:100%;
}

/* Service catalogue additions. */
.service-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.service-detail-card{height:100%;padding:28px;border:1px solid var(--xm-border);border-radius:24px;background:linear-gradient(145deg,var(--xm-panel),color-mix(in srgb,var(--xm-panel) 60%,transparent));box-shadow:inset 0 1px rgba(255,255,255,.035)}
.service-detail-card h3{margin:.85rem 0 .6rem;font-size:1.2rem;letter-spacing:-.025em}
.service-detail-card p{margin:0;color:var(--xm-muted);line-height:1.7;font-size:.92rem}
.service-detail-card .service-detail-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;color:var(--xs-logo-blue);font-weight:720;font-size:.84rem}
.service-detail-card .service-detail-link:hover{gap:.65rem}
.service-detail-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--xm-border);background:color-mix(in srgb,var(--xm-panel-strong) 82%,transparent);color:var(--xs-logo-blue);font-size:1rem}
.service-detail-card.xtnd-card{border-top:3px solid var(--xs-blue)}
.service-detail-card.hosting-card{border-top:3px solid var(--xs-cyan)}
.service-detail-card.xstudios-card{border-top:3px solid var(--xs-violet)}
.service-note{margin-top:24px;padding:22px 24px;border:1px solid var(--xm-border);border-radius:20px;background:color-mix(in srgb,var(--xm-panel) 50%,transparent);color:var(--xm-muted);line-height:1.7}
.service-note strong{color:var(--xm-text)}

@media(max-width:991.98px){.service-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767.98px){
  .xs-container,
  .home-modern .xm-container,
  .xs-footer-container,
  .page-hero-xs > .xs-container,
  .content-section > .xs-container,
  .section-shell > .xs-container,
  .cta-section > .xs-container,
  .subnav-xs > .xs-container{
    width:calc(100% - (var(--xs-grid-gutter-mobile) * 2))!important;
  }
  .service-detail-grid{grid-template-columns:1fr}
}


/* ============================================================
   XSTUDIOS MODERN CLIENT v5.4
   Full-width inner-page hero system
   ------------------------------------------------------------
   The hero background spans the viewport. All readable content
   remains on the canonical 1320px Xstudios grid, matching the
   homepage/header/footer alignment. The previous large rounded
   hero card is intentionally removed.
   ============================================================ */
.page-hero-xs.page-hero-wide{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:stretch;
  min-height:620px;
  padding:0!important;
  overflow:hidden;
  border-bottom:1px solid var(--xm-border);
  background:
    radial-gradient(circle at 8% 86%,color-mix(in srgb,var(--xm-primary) 13%,transparent),transparent 31rem),
    radial-gradient(circle at 91% 14%,color-mix(in srgb,var(--xm-primary-2) 12%,transparent),transparent 28rem),
    var(--xm-bg);
}

/* Service-specific photography becomes part of the page atmosphere,
   rather than a second contained card competing with the main grid. */
.page-hero-xs.page-hero-wide::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:var(--page-hero-image);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center right;
  opacity:.52;
  filter:saturate(.92) contrast(.98);
  transform:scale(1.012);
}
html[data-theme="dark"] .page-hero-xs.page-hero-wide::before{
  opacity:.40;
  filter:saturate(.88) brightness(.72) contrast(1.03);
}

/* Preserve a clean reading zone on the left while allowing the visual
   to emerge on the right. */
.page-hero-xs.page-hero-wide::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      var(--xm-bg) 0%,
      color-mix(in srgb,var(--xm-bg) 99%,transparent) 39%,
      color-mix(in srgb,var(--xm-bg) 91%,transparent) 54%,
      color-mix(in srgb,var(--xm-bg) 50%,transparent) 72%,
      color-mix(in srgb,var(--xm-bg) 10%,transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--xm-bg) 25%,transparent) 0%,
      transparent 48%,
      color-mix(in srgb,var(--xm-bg) 72%,transparent) 100%);
}
html[data-theme="dark"] .page-hero-xs.page-hero-wide::after{
  background:
    linear-gradient(90deg,
      var(--xm-bg) 0%,
      color-mix(in srgb,var(--xm-bg) 99%,transparent) 42%,
      color-mix(in srgb,var(--xm-bg) 92%,transparent) 57%,
      color-mix(in srgb,var(--xm-bg) 58%,transparent) 76%,
      color-mix(in srgb,var(--xm-bg) 18%,transparent) 100%),
    linear-gradient(180deg,rgba(7,9,13,.18),transparent 48%,rgba(7,9,13,.68) 100%);
}

.page-hero-xs.page-hero-wide > .xs-container{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  min-height:620px;
}
.page-hero-xs.page-hero-wide .page-hero-card{
  display:block!important;
  width:100%;
  min-height:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.page-hero-xs.page-hero-wide .page-hero-copy{
  width:min(850px,66%);
  max-width:850px;
  padding:76px 0 80px!important;
}
.page-hero-xs.page-hero-wide .page-hero-media{
  display:none!important;
}
.page-hero-xs.page-hero-wide .breadcrumb-xs{
  margin-bottom:1.3rem;
}
.page-hero-xs.page-hero-wide .section-kicker{
  width:max-content;
  max-width:100%;
}
.page-hero-xs.page-hero-wide .page-hero-title{
  max-width:850px;
  margin:1rem 0 1.25rem;
  font-size:clamp(3.35rem,4.7vw,5.55rem);
  line-height:.94;
  letter-spacing:-.064em;
}
.page-hero-xs.page-hero-wide .page-hero-lead{
  max-width:720px;
  font-size:clamp(1.03rem,1.35vw,1.22rem);
  line-height:1.72;
}
.page-hero-xs.page-hero-wide .hero-actions{
  margin-top:1.8rem;
}
.page-hero-xs.page-hero-wide .page-hero-points{
  max-width:760px;
  margin-top:1.55rem;
}

/* Company/contact retain the same composition with slightly less height. */
.page-hero-xs.page-hero-wide.page-hero-medium,
.page-hero-xs.page-hero-wide.page-hero-medium > .xs-container{
  min-height:560px;
}

/* Legal/information pages stay visually related without consuming a full
   service-landing-page viewport. */
.page-hero-xs.page-hero-wide.page-hero-compact,
.page-hero-xs.page-hero-wide.page-hero-compact > .xs-container{
  min-height:470px;
}
.page-hero-xs.page-hero-wide.page-hero-compact .page-hero-copy{
  width:min(810px,68%);
  max-width:810px;
  padding-top:58px!important;
  padding-bottom:62px!important;
}
.page-hero-xs.page-hero-wide.page-hero-compact .page-hero-title{
  font-size:clamp(3rem,4.25vw,4.85rem);
}

/* The section immediately after a full-width hero should connect cleanly
   instead of looking like a card floating above the next page layer. */
.page-hero-xs.page-hero-wide + .subnav-xs{
  border-top:0;
}

@media(max-width:1199.98px){
  .page-hero-xs.page-hero-wide,
  .page-hero-xs.page-hero-wide > .xs-container{min-height:580px}
  .page-hero-xs.page-hero-wide .page-hero-copy{width:min(760px,68%);max-width:760px}
  .page-hero-xs.page-hero-wide .page-hero-title{font-size:clamp(3.15rem,5.3vw,5rem)}
  .page-hero-xs.page-hero-wide.page-hero-medium,
  .page-hero-xs.page-hero-wide.page-hero-medium > .xs-container{min-height:530px}
  .page-hero-xs.page-hero-wide.page-hero-compact,
  .page-hero-xs.page-hero-wide.page-hero-compact > .xs-container{min-height:450px}
}

@media(max-width:991.98px){
  .page-hero-xs.page-hero-wide,
  .page-hero-xs.page-hero-wide > .xs-container,
  .page-hero-xs.page-hero-wide.page-hero-medium,
  .page-hero-xs.page-hero-wide.page-hero-medium > .xs-container,
  .page-hero-xs.page-hero-wide.page-hero-compact,
  .page-hero-xs.page-hero-wide.page-hero-compact > .xs-container{
    min-height:auto;
  }
  .page-hero-xs.page-hero-wide::before{
    opacity:.28;
    background-position:62% center;
  }
  html[data-theme="dark"] .page-hero-xs.page-hero-wide::before{opacity:.24}
  .page-hero-xs.page-hero-wide::after,
  html[data-theme="dark"] .page-hero-xs.page-hero-wide::after{
    background:
      linear-gradient(90deg,var(--xm-bg) 0%,color-mix(in srgb,var(--xm-bg) 96%,transparent) 60%,color-mix(in srgb,var(--xm-bg) 78%,transparent) 100%),
      linear-gradient(180deg,color-mix(in srgb,var(--xm-bg) 22%,transparent),var(--xm-bg) 100%);
  }
  .page-hero-xs.page-hero-wide .page-hero-copy,
  .page-hero-xs.page-hero-wide.page-hero-compact .page-hero-copy{
    width:100%;
    max-width:780px;
    padding:68px 0 72px!important;
  }
  .page-hero-xs.page-hero-wide .page-hero-title,
  .page-hero-xs.page-hero-wide.page-hero-compact .page-hero-title{
    max-width:760px;
    font-size:clamp(3rem,7.6vw,4.65rem);
  }
}

@media(max-width:767.98px){
  .page-hero-xs.page-hero-wide{
    padding:0!important;
    background:
      radial-gradient(circle at 88% 10%,color-mix(in srgb,var(--xm-primary-2) 12%,transparent),transparent 20rem),
      radial-gradient(circle at 6% 92%,color-mix(in srgb,var(--xm-primary) 11%,transparent),transparent 22rem),
      var(--xm-bg);
  }
  .page-hero-xs.page-hero-wide::before{
    opacity:.16;
    background-position:center top;
  }
  html[data-theme="dark"] .page-hero-xs.page-hero-wide::before{opacity:.14}
  .page-hero-xs.page-hero-wide::after,
  html[data-theme="dark"] .page-hero-xs.page-hero-wide::after{
    background:linear-gradient(180deg,color-mix(in srgb,var(--xm-bg) 64%,transparent) 0%,var(--xm-bg) 76%);
  }
  .page-hero-xs.page-hero-wide .page-hero-copy,
  .page-hero-xs.page-hero-wide.page-hero-compact .page-hero-copy{
    padding:48px 0 54px!important;
  }
  .page-hero-xs.page-hero-wide .breadcrumb-xs{margin-bottom:1rem}
  .page-hero-xs.page-hero-wide .page-hero-title,
  .page-hero-xs.page-hero-wide.page-hero-compact .page-hero-title{
    margin-top:.85rem;
    font-size:clamp(2.7rem,12vw,4rem);
    line-height:.96;
    letter-spacing:-.058em;
  }
  .page-hero-xs.page-hero-wide .page-hero-lead{font-size:1rem;line-height:1.68}
  .page-hero-xs.page-hero-wide .hero-actions{margin-top:1.5rem}
  .page-hero-xs.page-hero-wide .page-hero-points{margin-top:1.25rem}
}


/* v5.5 — client-facing pricing and project-scale system */
.pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pricing-card{position:relative;overflow:hidden;height:100%}
.pricing-card.featured{border-color:color-mix(in srgb,var(--xs-violet) 52%,var(--xs-theme-line));background:radial-gradient(circle at 92% 0%,rgba(43,187,234,.10),transparent 14rem),radial-gradient(circle at 0 100%,rgba(103,88,237,.12),transparent 16rem),linear-gradient(145deg,var(--xs-theme-surface),var(--xs-theme-surface-soft));box-shadow:0 22px 58px rgba(70,70,180,.10)}
.pricing-label{color:var(--xs-theme-muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin-bottom:.4rem}
.pricing-value{display:block;margin:.8rem 0 1rem;font-size:clamp(1.8rem,2.6vw,2.55rem);line-height:1;letter-spacing:-.05em;font-weight:820;color:var(--xs-theme-text)}
.pricing-card p{margin-bottom:0}
.pricing-badge{position:absolute;top:18px;right:18px;padding:.38rem .62rem;border-radius:999px;background:rgba(103,88,237,.13);border:1px solid rgba(103,88,237,.25);color:color-mix(in srgb,var(--xs-violet) 75%,var(--xs-theme-text));font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.pricing-disclaimer{margin-top:20px;color:var(--xs-theme-muted);font-size:.88rem;line-height:1.68}
.pricing-disclaimer strong{color:var(--xs-theme-text)}
.home-modern .xm-project-scale{margin-top:18px;padding:clamp(1.7rem,4vw,2.8rem);border-radius:28px}
.home-modern .xm-project-scale h3{font-size:clamp(1.8rem,3.6vw,3.25rem);line-height:1;letter-spacing:-.05em;margin:.65rem 0 1rem;max-width:820px}
.home-modern .xm-project-scale p{max-width:920px;color:var(--xm-muted);line-height:1.72;margin:0}
.home-modern .xm-project-scale .xm-scale-points{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.25rem}
.home-modern .xm-project-scale .xm-scale-points span{display:inline-flex;padding:.42rem .68rem;border:1px solid var(--xm-border);border-radius:999px;color:var(--xm-muted);font-size:.76rem;font-weight:720;background:color-mix(in srgb,var(--xm-panel) 55%,transparent)}
@media(max-width:1199.98px){.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767.98px){.pricing-grid{grid-template-columns:1fr}.pricing-badge{position:static;display:inline-flex;margin-bottom:.75rem}.home-modern .xm-project-scale{border-radius:24px}}


/* ============================================================
   XSTUDIOS MODERN CLIENT v5.6
   FAQ grid alignment + mobile offcanvas logo + XTND bridge pages
   ============================================================ */

/* FAQ layouts used Bootstrap column gutters inside an already constrained grid,
   creating an extra left/right inset. Use a direct two-column grid instead so
   the first and last pixels align with the canonical 1320px section grid. */
.home-modern #faq > .xm-container > .row,
main section#faq > .xs-container > .row{
  --bs-gutter-x:0;
  --bs-gutter-y:0;
  margin:0!important;
}
.home-modern #faq > .xm-container > .row > [class*="col-"],
main section#faq > .xs-container > .row > [class*="col-"]{
  padding-left:0!important;
  padding-right:0!important;
}
@media(min-width:992px){
  .home-modern #faq > .xm-container > .row,
  main section#faq > .xs-container > .row{
    display:grid!important;
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    gap:clamp(38px,5vw,72px);
    align-items:start;
  }
  .home-modern #faq > .xm-container > .row > .col-lg-5,
  .home-modern #faq > .xm-container > .row > .col-lg-7,
  main section#faq > .xs-container > .row > .col-lg-5,
  main section#faq > .xs-container > .row > .col-lg-7{
    width:auto!important;
    max-width:none!important;
  }
}
@media(max-width:991.98px){
  .home-modern #faq > .xm-container > .row,
  main section#faq > .xs-container > .row{
    display:grid!important;
    grid-template-columns:1fr;
    gap:30px;
  }
}

/* Offcanvas logo: do not combine HTML intrinsic width with a forced CSS height.
   The explicit auto width preserves the source aspect ratio while the menu opens. */
.offcanvas-header .mobile-nav-logo{
  display:block;
  width:auto!important;
  height:38px!important;
  max-width:min(190px,calc(100vw - 156px));
  object-fit:contain;
  flex:0 0 auto;
}
.offcanvas-header .d-flex{min-width:0}
@media(max-width:380px){
  .offcanvas-header .mobile-nav-logo{height:34px!important;max-width:158px}
}

/* XTND information pages live inside Xstudios as client-facing bridge pages.
   They deliberately use the Xstudios design system rather than copying the XTND site. */
.xtnd-bridge-page .page-hero-xs.page-hero-wide{
  background:
    radial-gradient(circle at 11% 82%,color-mix(in srgb,var(--xm-primary) 18%,transparent),transparent 31rem),
    radial-gradient(circle at 88% 18%,color-mix(in srgb,var(--xm-primary-2) 17%,transparent),transparent 29rem),
    var(--xm-bg);
}
.xtnd-bridge-page .page-hero-xs.page-hero-wide::before{
  opacity:.23;
  background-position:72% center;
}
html[data-theme="dark"] .xtnd-bridge-page .page-hero-xs.page-hero-wide::before{opacity:.20}
.xtnd-bridge-page .page-hero-xs.page-hero-wide::after{
  background:
    linear-gradient(90deg,var(--xm-bg) 0%,color-mix(in srgb,var(--xm-bg) 99%,transparent) 45%,color-mix(in srgb,var(--xm-bg) 85%,transparent) 64%,color-mix(in srgb,var(--xm-bg) 30%,transparent) 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--xm-bg) 16%,transparent),transparent 52%,color-mix(in srgb,var(--xm-bg) 70%,transparent));
}
.xtnd-capability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.xtnd-capability-card{height:100%;padding:28px;border:1px solid var(--xm-border);border-radius:24px;background:linear-gradient(145deg,var(--xm-panel),color-mix(in srgb,var(--xm-panel) 58%,transparent));box-shadow:inset 0 1px rgba(255,255,255,.035)}
.xtnd-capability-card .service-detail-icon{margin-bottom:1rem}
.xtnd-capability-card h3{font-size:1.22rem;letter-spacing:-.025em;margin:0 0 .65rem}
.xtnd-capability-card p{color:var(--xm-muted);line-height:1.72;margin:0}
.xtnd-capability-card a{display:inline-flex;gap:.45rem;align-items:center;margin-top:1.15rem;color:var(--xs-logo-blue);font-weight:720;font-size:.86rem}
.xtnd-capability-card a:hover{gap:.65rem}
.xtnd-bridge-band{padding:clamp(30px,4vw,44px);border:1px solid var(--xm-border);border-radius:28px;background:radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--xm-primary-2) 13%,transparent),transparent 18rem),linear-gradient(145deg,var(--xm-panel),color-mix(in srgb,var(--xm-panel) 58%,transparent))}
.xtnd-bridge-band h3{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.04em;margin:0 0 .85rem}
.xtnd-bridge-band p{color:var(--xm-muted);line-height:1.75;max-width:880px;margin:0}
.xtnd-bridge-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.35rem}
.xtnd-external-note{margin-top:1rem;color:var(--xm-muted);font-size:.82rem}
@media(max-width:991.98px){.xtnd-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767.98px){.xtnd-capability-grid{grid-template-columns:1fr}.xtnd-bridge-band{border-radius:22px}}


/* ============================================================
   XSTUDIOS MODERN CLIENT v5.7 — XTND implementation content hub
   ============================================================ */
.xs-mega-xtnd-expanded{width:min(1180px,calc(100vw - 34px));max-width:none!important}
.xs-menu-group-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--xm-muted);margin:2px 0 10px;padding:0 4px}
.xs-product-link.compact{min-height:0;padding:10px;border-radius:14px;margin-bottom:4px;grid-template-columns:36px 1fr;gap:10px}
.xs-product-link.compact .xs-product-icon{width:36px;height:36px;border-radius:10px;font-size:.95rem}
.xs-product-link.compact strong{font-size:.86rem}
.xs-product-link.compact small{font-size:.72rem;line-height:1.35;margin-top:2px}
.xs-mega-button-quiet{background:transparent!important;color:var(--xm-text)!important;border:1px solid var(--xm-border)!important}

.xtnd-prose-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:clamp(28px,5vw,72px);align-items:start}
.xtnd-prose h3{font-size:clamp(1.45rem,2.5vw,2rem);letter-spacing:-.035em;margin-bottom:1rem}
.xtnd-prose p{color:var(--xm-muted);line-height:1.82;font-size:1rem;margin-bottom:1rem}
.xtnd-prose-panel{padding:clamp(24px,3vw,34px);border:1px solid var(--xm-border);border-radius:24px;background:linear-gradient(145deg,var(--xm-panel),color-mix(in srgb,var(--xm-panel) 62%,transparent))}
.xtnd-check-list{display:grid;gap:13px;list-style:none;margin:0;padding:0}
.xtnd-check-list li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:var(--xm-text);line-height:1.55}
.xtnd-check-list i{color:var(--xs-logo-blue);font-size:1rem;margin-top:.12rem}
.xtnd-note-box{margin-top:24px;padding:18px;border-radius:17px;background:color-mix(in srgb,var(--xm-primary) 8%,var(--xm-panel));border:1px solid color-mix(in srgb,var(--xm-primary) 24%,var(--xm-border))}
.xtnd-note-box strong{display:block;margin-bottom:6px}
.xtnd-note-box p{margin:0;color:var(--xm-muted);line-height:1.65;font-size:.9rem}
.xtnd-step-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.xtnd-step{padding:26px;border:1px solid var(--xm-border);border-radius:22px;background:var(--xm-panel)}
.xtnd-step>span{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--xm-primary) 11%,var(--xm-panel));color:var(--xs-logo-blue);font-weight:850;font-size:.76rem;letter-spacing:.08em}
.xtnd-step h3{font-size:1.05rem;margin:18px 0 7px;letter-spacing:-.02em}
.xtnd-step p{margin:0;color:var(--xm-muted);line-height:1.65;font-size:.9rem}
.xtnd-faq-list{max-width:980px;margin:0 auto;display:grid;gap:10px}
.xtnd-faq-item{border:1px solid var(--xm-border);border-radius:18px;background:var(--xm-panel);overflow:hidden}
.xtnd-faq-item summary{cursor:pointer;padding:20px 22px;font-weight:760;list-style:none;position:relative;padding-right:52px}
.xtnd-faq-item summary::-webkit-details-marker{display:none}
.xtnd-faq-item summary::after{content:'+';position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--xm-muted)}
.xtnd-faq-item[open] summary::after{content:'−'}
.xtnd-faq-item p{margin:0;padding:0 22px 22px;color:var(--xm-muted);line-height:1.75}

@media(max-width:1199.98px){.xs-mega-xtnd-expanded{width:min(1000px,calc(100vw - 28px))}}
@media(max-width:991.98px){
 .xtnd-prose-grid{grid-template-columns:1fr}.xtnd-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:575.98px){.xtnd-step-grid{grid-template-columns:1fr}.xtnd-prose-panel{padding:20px}.xtnd-faq-item summary{padding:18px 48px 18px 18px}.xtnd-faq-item p{padding:0 18px 18px}}

/* ============================================================
   XSTUDIOS MODERN CLIENT v5.8 — LANGUAGE SWITCH
   ============================================================ */
.language-switch-xs{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 10px;
  border:1px solid var(--xm-border);
  border-radius:999px;
  background:color-mix(in srgb,var(--xm-panel) 78%,transparent);
  color:var(--xm-text);
  text-decoration:none;
  font-size:.76rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.08em;
  flex:0 0 auto;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.language-switch-xs:hover,
.language-switch-xs:focus-visible{
  color:var(--xm-text);
  border-color:color-mix(in srgb,var(--xm-primary) 48%,var(--xm-border));
  background:color-mix(in srgb,var(--xm-primary) 10%,var(--xm-panel));
  transform:translateY(-1px);
}
.offcanvas-header .language-switch-mobile{
  width:auto!important;
  min-width:40px;
  height:38px;
  padding-inline:10px;
  margin-left:8px;
}
@media(max-width:380px){
  .offcanvas-header .language-switch-mobile{height:36px;min-width:38px;padding-inline:8px;margin-left:5px}
}