/* ==========================================================================
   Pages 1–4 — exact reproduction of the approved designs
   Home 739f7c57 (1536×1024) · Gallery 0c7a8a42 (1672×941) · Services ffbc6c53 (1448×1086)
   Details fc7d50aa right half (Finance & Accounting example)
   ========================================================================== */
@font-face { font-family: 'XDisplay'; src: url('/assets/design/p1-4/fonts/InterDisplay-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'XDisplay'; src: url('/assets/design/p1-4/fonts/InterDisplay-Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'XDisplay'; src: url('/assets/design/p1-4/fonts/InterDisplay-SemiBold.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'XDisplay'; src: url('/assets/design/p1-4/fonts/InterDisplay-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'XDisplay'; src: url('/assets/design/p1-4/fonts/InterDisplay-ExtraBold.woff') format('woff'); font-weight: 800; font-display: swap; }
.xp-home, .xp-gal, .xp-svc, .xp-det { --xo: #FE5000; --xo2: #FF6A00; --xg: linear-gradient(90deg, #FF6A00 0%, #FE4200 100%); --xink: #111; --xtx: #3D4049; --xmut: #6B6E78; --xln: #ECECF0; font-family: 'XDisplay', 'Inter', system-ui, sans-serif; color: var(--xink); letter-spacing: -0.012em; }
.xp-home h1, .xp-home h2, .xp-home h3, .xp-gal h1, .xp-gal h2, .xp-gal h3, .xp-svc h1, .xp-svc h2, .xp-svc h3, .xp-det h1, .xp-det h2, .xp-det h3 { font-family: 'XDisplay', 'Inter', system-ui, sans-serif; margin: 0; }
.xp-home .br-d, .xp-gal .br-d, .xp-svc .br-d, .xp-det .br-d { display: inline; }
@media (max-width: 1100px) { .xp-home .br-d, .xp-gal .br-d, .xp-svc .br-d, .xp-det .br-d { display: none; } }

/* ------------------------------- HOME ------------------------------------ */
.xp-home .xw { max-width: 1536px; margin: 0 auto; padding: 0 68px 0 72px; position: relative; }
.xp-home .hh { position: relative; height: 376px; overflow: hidden; background: #FAF7F4; }
.xp-home .hh-bg { position: absolute; inset: 0; }
.xp-home .hh-bg img { width: 1536px; height: 376px; position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: block; }
.xp-home .hh-in { height: 376px; }
.xp-home .hh-pill { display: inline-flex; align-items: center; gap: 9px; height: 22px; padding: 0 10px 0 8px; border-radius: 11px; background: rgba(255,255,255,.75); font-size: 10.7px; font-weight: 600; letter-spacing: .01em; color: #23252B; }
.xp-home .hh-pill i { width: 10px; height: 10px; border-radius: 50%; background: var(--xo); box-shadow: 0 0 0 3px rgba(254,80,0,.15); }
.xp-home .hh-in > .hh-pill { position: absolute; left: 72px; top: 29px; }
.xp-home .hh h1 { position: absolute; left: 72px; top: 57px; font-size: 51px; line-height: 51px; font-weight: 700; letter-spacing: -0.041em; color: #0E0E10; white-space: nowrap; }
.xp-home .hh h1 span { color: var(--xo); }
.xp-home .hh-lead { position: absolute; left: 72px; top: 168px; margin: 0; font-size: 16.2px; line-height: 22px; color: #2E3038; letter-spacing: -0.02em; width: 600px; }
.xp-home .hh-chips { position: absolute; left: 72px; top: 229px; display: flex; gap: 12px; }
.xp-home .hh-chips span:nth-child(1) { width: 150px; } .xp-home .hh-chips span:nth-child(2) { width: 118px; } .xp-home .hh-chips span:nth-child(3) { width: 128px; } .xp-home .hh-chips span:nth-child(4) { width: 132px; }
.xp-home .hh-chips span { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 0 0 6px; border-radius: 15px; background: rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(0,0,0,.05); font-size: 11.2px; letter-spacing: 0; font-weight: 500; color: #1F2A44; }
.xp-home .hh-chips i { width: 20px; height: 20px; border-radius: 50%; background: var(--xo); color: #fff; display: grid; place-items: center; font-style: normal; }
.xp-home .hh-btns { position: absolute; left: 72px; top: 279px; display: flex; gap: 14px; }
.xp-home .hh-btns a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 47px; border-radius: 10px; font-size: 16px; font-weight: 600; text-decoration: none; }
.xp-home .hh-b1 { width: 216px; background: var(--xg); color: #fff; box-shadow: 0 10px 18px -10px rgba(254,66,0,.75); }
.xp-home .hh-b2 { width: 181px; background: #fff; color: #18191D; border: 1.5px solid #FE6A2A; }
.xp-home .hh-b2 .i { color: var(--xo); }
.xp-home .hh-stats { position: absolute; left: 1104px; top: 304px; width: 388px; height: 63px; display: flex; align-items: center; background: #fff; border-radius: 12px; box-shadow: 0 8px 26px -10px rgba(0,0,0,.25); padding: 0 14px; gap: 6px; }
.xp-home .hh-stats > div { display: flex; align-items: center; gap: 9px; flex: 1; }
.xp-home .hh-stats i { width: 36px; height: 36px; border-radius: 50%; background: #FFF1E6; color: var(--xo); display: grid; place-items: center; font-style: normal; flex: none; }
.xp-home .hh-stats b { display: block; font-size: 17.5px; font-weight: 800; line-height: 1.05; color: #111; }
.xp-home .hh-stats small { display: block; font-size: 10.5px; color: #6B6E78; white-space: nowrap; }

/* category strip */
.xp-home .hcat-s { background: #FBFBFC; padding: 10px 0 0; height: 90px; }
.xp-home .hcat { display: flex; gap: 0; margin-left: -2px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.xp-home .hcat::-webkit-scrollbar { display: none; }
.xp-home .hcat-t { flex: none; width: var(--w); margin-right: var(--m); height: 66px; padding: 0 2px; border-radius: 11px; border: 1px solid #EBEBEF; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font-size: 11.3px; font-weight: 500; color: #2B2D33; cursor: pointer; font-family: inherit; }
.xp-home .hcat-t > span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #1E1F24; }
.xp-home .hcat-t[aria-pressed=true] { border-color: #FE7A3E; background: #FFF7F2; color: var(--xo); }
.xp-home .hcat-t[aria-pressed=true] > span { background: var(--xo); color: #fff; }
.xp-home .hcat-t:hover { border-color: #FFB089; }

/* explore section (design y 525→840) */
.xp-home .hx { background: linear-gradient(180deg, #FBFBFC 0, #FDFCFB 100%); padding: 11px 0 0; height: 315px; position: relative; overflow: hidden; }
.xp-home .hx::before { content: ''; position: absolute; left: -120px; top: 40px; width: 520px; height: 300px; background: radial-gradient(closest-side, rgba(255,170,120,.18), transparent); pointer-events: none; }
.xp-home .hx-head { display: flex; justify-content: space-between; align-items: flex-start; height: 88px; position: relative; }
.xp-home .hx-head .hh-pill { background: #FFF1E8; font-size: 10.8px; font-weight: 500; }
.xp-home .hx h2 { font-size: 30px; line-height: 32px; font-weight: 700; letter-spacing: -0.035em; margin: 1px 0 0; color: #0E0E10; }
.xp-home .hx h2 span { color: var(--xo); }
.xp-home .hx-head p { margin: 7px 0 0; font-size: 15.5px; line-height: 18px; color: #555963; }
.xp-home .hx-ctrl { display: flex; align-items: center; gap: 8px; margin-top: 56px; }
.xp-home .hx-all { display: inline-flex; gap: 6px; align-items: center; color: var(--xo); font-size: 13.6px; font-weight: 500; text-decoration: none; margin-right: 12px; }
.xp-home .hx-arr { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #DCDCE2; background: #fff; display: grid; place-items: center; color: #111; cursor: pointer; }
.xp-home .hx-arr:hover { border-color: var(--xo); color: var(--xo); }
.xp-home .hx-car { display: grid; grid-auto-flow: column; grid-auto-columns: 226px; gap: 9.6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; margin-left: -6px; padding: 0 0 4px; width: calc(100% + 6px); }
.xp-home .hx-car::-webkit-scrollbar { display: none; }
.xp-home .hc { scroll-snap-align: start; height: 205px; border: 1px solid #ECECF0; border-radius: 10px; background: #fff; padding: 7px 9px 9px; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(20,20,30,.04); }
.xp-home .hc.hl { border-color: var(--xo); box-shadow: 0 0 0 2px rgba(254,80,0,.2); }
.xp-home .hc-img { display: block; height: 90px; margin: 0 0 6px 3px; }
.xp-home .hc-img img { width: 207px; height: 90px; object-fit: cover; display: block; border-radius: 3px; }
.xp-home .hc-t { display: flex; gap: 9px; align-items: flex-start; flex: 1; min-height: 0; }
.xp-home .hc-ic { width: 40px; height: 40px; border-radius: 50%; background: #FFF1E7; color: var(--xo); display: grid; place-items: center; flex: none; }
.xp-home .hc-t h3 { font-size: 11.2px; line-height: 15px; font-weight: 600; margin: 4px 0 1px; color: #111; letter-spacing: -0.005em; white-space: nowrap; }
.xp-home .hc-t p { margin: 0; font-size: 10.3px; line-height: 15px; color: #6B6E78; letter-spacing: 0; }
.xp-home .hc-a { display: grid; grid-template-columns: 112px 91px; gap: 6px; }
.xp-home .hc-a a { height: 30px; border-radius: 6px; display: grid; place-items: center; font-size: 11.6px; font-weight: 500; text-decoration: none; }
.xp-home .hc-live { background: var(--xo); color: #fff; }
.xp-home .hc-det { border: 1px solid #FE6A2A; color: #222; background: #fff; }

/* why band (design y 840→1024) */
.xp-home .hw { background: #0C0C0C; color: #fff; position: relative; overflow: visible; min-height: 186px; }
.xp-home .hw::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px 160px at 920px 100%, rgba(254,90,0,.30), transparent 70%), radial-gradient(600px 200px at 50% 140%, rgba(254,90,0,.12), transparent 70%); pointer-events: none; }
.xp-home .hw-in { display: flex; justify-content: space-between; position: relative; }
.xp-home .hw-l { padding: 20px 0 16px; }
.xp-home .hw-pill { background: rgba(255,255,255,.08); color: #fff; font-size: 10.8px; font-weight: 500; }
.xp-home .hw h2 { font-size: 26px; line-height: 30px; font-weight: 700; letter-spacing: -0.03em; margin: 5px 0 6px; color: #fff; }
.xp-home .hw h2 span { color: var(--xo); }
.xp-home .hw-l p { margin: 0 0 14px; font-size: 15px; line-height: 18px; color: #D9DADF; }
.xp-home .hw-f { display: grid; grid-template-columns: 200px 201px 221px 200px; }
.xp-home .hw-f > div { display: flex; gap: 12px; align-items: center; }
.xp-home .hw-f i { width: 40px; height: 40px; border-radius: 50%; background: #3A1A08; color: var(--xo); display: grid; place-items: center; font-style: normal; flex: none; }
.xp-home .hw-f b { display: block; font-size: 11.6px; font-weight: 600; }
.xp-home .hw-f small { display: block; font-size: 10.6px; color: #B9BBC2; margin-top: 4px; }
.xp-home .hcf { position: relative; width: 523px; margin-top: -4px; margin-bottom: -6px; background: #fff; color: #111; border-radius: 14px; padding: 9px 16px 13px 18px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.45); align-self: flex-start; z-index: 2; }
.xp-home .hcf-pill { display: inline-flex; align-items: center; gap: 7px; height: 20px; padding: 0 9px 0 7px; border-radius: 10px; background: #FFF0E6; color: var(--xo); font-size: 9.4px; font-weight: 500; letter-spacing: .01em; }
.xp-home .hcf-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--xo); box-shadow: 0 0 0 2px rgba(254,80,0,.2); }
.xp-home .hcf h3 { font-size: 20.5px; line-height: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 4px 0 1px; }
.xp-home .hcf > p { margin: 0 0 9px; font-size: 12.8px; line-height: 14px; color: #555963; }
.xp-home .hcf-row { display: grid; grid-template-columns: 118px 118px 115px 109px; gap: 10px 11px; }
.xp-home .hcf label { display: grid; gap: 4px; font-size: 10.5px; font-weight: 600; color: #1A1B1F; min-width: 0; }
.xp-home .hcf input, .xp-home .hcf select { width: 100%; height: 28px; border: 1px solid #E3E4E9; border-radius: 6px; background: #F7F8FA; padding: 0 7px; font-size: 10px; color: #333; font-family: inherit; min-width: 0; }
.xp-home .hcf input::placeholder { color: #8C8F98; }
.xp-home .hcf select { color: #6B6E78; }
.xp-home .hcf-tel { display: grid; grid-template-columns: 54px 1fr; border: 1px solid #E3E4E9; border-radius: 6px; background: #fff; height: 28px; overflow: hidden; }
.xp-home .hcf-tel input { border: 0; height: 26px; background: #fff; border-radius: 0; }
.xp-home .hcf-cc { display: flex; align-items: center; gap: 2px; padding-left: 4px; background: #F7F8FA; border-right: 1px solid #E3E4E9; }
.xp-home .hcf-cc svg { flex: none; }
.xp-home .hcf-cc select { border: 0; background: transparent; padding: 0; height: 26px; font-size: 10px; font-weight: 700; color: #111; width: 34px; }
.xp-home .hcf-date { position: relative; display: block; }
.xp-home .hcf-date .i { position: absolute; left: 7px; top: 6px; color: #444; pointer-events: none; }
.xp-home .hcf-date input { padding-left: 26px; background: #fff; }
.xp-home .hcf-btn { margin-top: 8px; width: 100%; height: 31px; border: 0; border-radius: 6px; background: var(--xo); color: #fff; font-size: 12.6px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-family: inherit; }
.xp-home .hcf .field-error { font-size: 10px; font-weight: 500; }

/* home responsive */
@media (max-width: 1500px) { .xp-home .hh-stats { left: auto; right: 44px; } }
@media (max-width: 1180px) {
  .xp-home .hw-in { flex-direction: column; }
  .xp-home .hcf { width: auto; margin: 0 0 24px; }
  .xp-home .hw-f { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 1000px) {
  .xp-home .xw { padding: 0 20px; }
  .xp-home .hh { height: auto; background: linear-gradient(180deg, #FFF8F2, #fff); }
  .xp-home .hh-bg { position: relative; height: 300px; order: 2; }
  .xp-home .hh-bg img { width: auto; height: 300px; left: auto; right: -40px; transform: none; }
  .xp-home .hh { display: flex; flex-direction: column-reverse; }
  .xp-home .hh-in { height: auto; padding-top: 22px; padding-bottom: 10px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
  .xp-home .hh-in > *, .xp-home .hh h1, .xp-home .hh-lead, .xp-home .hh-chips, .xp-home .hh-btns, .xp-home .hh-stats { position: static !important; transform: none; }
  .xp-home .hh h1 { font-size: clamp(32px, 8vw, 51px); line-height: 1.04; white-space: normal; }
  .xp-home .hh-lead { width: auto; }
  .xp-home .hh-chips { flex-wrap: wrap; gap: 8px; }
  .xp-home .hh-btns { flex-wrap: wrap; }
  .xp-home .hh-stats { width: 100%; max-width: 400px; }
  .xp-home .hx-head { height: auto; flex-wrap: wrap; gap: 10px; }
  .xp-home .hx h2 { font-size: 24px; line-height: 1.2; }
  .xp-home .hw-l { padding-bottom: 20px; }
}
@media (max-width: 560px) {
  .xp-home .hh-btns a { width: 100% !important; }
  .xp-home .hh-btns { width: 100%; flex-direction: column; }
  .xp-home .hh-stats { padding: 0 8px; }
  .xp-home .hh-stats small { font-size: 9.5px; }
  .xp-home .hcf-row { grid-template-columns: 1fr 1fr; }
  .xp-home .hw-f { grid-template-columns: 1fr; }
  .xp-home .hx-car { grid-auto-columns: 78%; }
  .xp-home .hc-img img { width: 100%; }
  .xp-home .hc-a { grid-template-columns: 1fr 1fr; }
}
/* home fine-tuning */
.xp-home .hcat-t { font-size: 10.6px; white-space: nowrap; gap: 6px; }
.xp-home .hx-ctrl { margin-top: 30px; }
.xp-home .hx-all { font-size: 12.6px; }
.xp-home .hw-l { padding-top: 19px; }
.xp-home .hw h2 { font-size: 25px; margin: 2px 0 4px; }
.xp-home .hw-l p { font-size: 14.6px; margin-bottom: 12px; }
.xp-home .hcf { margin-top: -13px; }
.xp-home .hcf h3 { font-size: 19.6px; margin-top: 3px; }
.xp-home .hcf > p { margin-bottom: 5px; font-size: 12.4px; }

/* ------------------------------ SERVICES (design ffbc6c53, 1448 wide) ------------------------------ */
.xp-svc { background: #FBF7F3; position: relative; overflow: hidden; }
.xp-svc::before { content: ''; position: absolute; left: -200px; top: 380px; width: 600px; height: 700px; background: radial-gradient(closest-side, rgba(255,160,110,.22), transparent); pointer-events: none; }
.xp-svc .sv-w { max-width: 1448px; margin: 0 auto; padding: 0 54px 0 64px; position: relative; }
.xp-svc .sv-hero { position: relative; height: 275px; overflow: hidden; }
.xp-svc .sv-hero-bg { position: absolute; left: 50%; top: 0; width: 1448px; height: 275px; transform: translateX(-50%); display: block; }
.xp-svc .sv-hero-in { height: 275px; padding-left: 84px; }
.xp-svc .sv-lab { display: inline-flex; align-items: center; gap: 9px; font-size: 10.8px; font-weight: 600; letter-spacing: .09em; color: #3F4350; }
.xp-svc .sv-lab::before { content: ''; width: 12px; height: 3px; border-radius: 2px; background: var(--xo); }
.xp-svc .sv-lab-w { color: #F1F1F3; }
.xp-svc .sv-hero-in .sv-lab { position: absolute; top: 18px; }
.xp-svc .sv-hero h1 { position: absolute; top: 40px; font-size: 52px; line-height: 49px; font-weight: 700; letter-spacing: -0.035em; color: #0B0B0D; }
.xp-svc .sv-hero h1 span { color: var(--xo); }
.xp-svc .sv-hero p { position: absolute; top: 151px; margin: 0; font-size: 15.3px; line-height: 17px; color: #2D3039; letter-spacing: -0.01em; }
.xp-svc .sv-btns { position: absolute; top: 219px; display: flex; gap: 13px; }
.xp-svc .sv-b1, .xp-svc .sv-b2, .xp-svc .sv-bw { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 36px; border-radius: 18px; font-size: 13.4px; font-weight: 600; text-decoration: none; }
.xp-svc .sv-b1 { width: 189px; background: var(--xg); color: #fff; box-shadow: 0 8px 18px -10px rgba(254,66,0,.8); }
.xp-svc .sv-b2 { width: 171px; background: #fff; color: #1A1B20; border: 1.5px solid #FE7A3E; }
.xp-svc .sv-b2 .i { color: var(--xo); }
.xp-svc .sv-panel { position: relative; background: #fff; border-radius: 34px 34px 0 0; margin: -2px 0 0; padding: 12px 0 0; box-shadow: 0 -6px 24px rgba(255,140,70,.07); }
.xp-svc .sv-sec { padding-bottom: 0; }
.xp-svc .sv-head { display: grid; grid-template-columns: 500px 1fr auto; align-items: end; padding-left: 18px; height: 46px; margin-bottom: 9px; }
.xp-svc .sv-head h2 { font-size: 22px; line-height: 26px; font-weight: 700; letter-spacing: -0.02em; color: #12132A; margin-top: 2px; }
.xp-svc .sv-head h2 span { color: var(--xo); }
.xp-svc .sv-side { margin: 0 0 4px; font-size: 10.6px; line-height: 12px; color: #4D515C; }
.xp-svc .sv-more { color: var(--xo); font-size: 10.6px; font-weight: 500; text-decoration: none; display: inline-flex; gap: 5px; align-items: center; margin: 0 10px 2px 0; }
.xp-svc .sv-grid { display: grid; grid-template-columns: 436px 428px 432px; column-gap: 12px; row-gap: 9px; }
.xp-svc .sv-card { display: grid; grid-template-columns: 48px 1fr 24px; gap: 0 20px; align-items: center; height: 59px; padding: 0 13px 0 24px; border-radius: 10px; background: #fff; box-shadow: 0 2px 12px rgba(30,30,50,.06); text-decoration: none; color: inherit; }
.xp-svc .sv-card:hover { box-shadow: 0 4px 16px rgba(254,90,0,.16); }
.xp-svc .sv-sq { width: 48px; height: 48px; border-radius: 10px; background: linear-gradient(180deg, #FF8A2A, #FE5300); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 12px -6px rgba(254,80,0,.8); }
.xp-svc .sv-ct b { display: block; font-size: 12.4px; font-weight: 600; color: #15161C; letter-spacing: -0.01em; }
.xp-svc .sv-ct small { display: block; font-size: 10.4px; line-height: 12.4px; color: #5B5F6A; margin-top: 3px; }
.xp-svc .sv-go { width: 24px; height: 24px; border-radius: 50%; background: var(--xo); color: #fff; display: grid; place-items: center; }
.xp-svc .sv-head2 { margin-top: 12px; }
.xp-svc .sv-proc { display: grid; grid-template-columns: repeat(6, 1fr); height: 82px; align-items: center; padding: 0 6px 0 0; border-radius: 12px; background: #fff; box-shadow: 0 2px 14px rgba(30,30,50,.06); }
.xp-svc .sv-step { position: relative; display: flex; gap: 10px; align-items: center; }
.xp-svc .sv-pi { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #FFF4EC, #FFE8D8); color: var(--xo); display: grid; place-items: center; flex: none; }
.xp-svc .sv-step em { display: inline-block; font-style: normal; background: var(--xo); color: #fff; font-size: 9.6px; font-weight: 700; border-radius: 4px; padding: 1px 5px; margin-bottom: 4px; }
.xp-svc .sv-step b { display: block; font-size: 11.6px; font-weight: 600; color: #15161C; }
.xp-svc .sv-step small { display: block; font-size: 9.6px; line-height: 12px; color: #5B5F6A; margin-top: 2px; }
.xp-svc .sv-arr { position: absolute; right: 12px; top: 20px; color: #111; }
.xp-svc .sv-box { display: grid; grid-template-columns: 250px 1fr; gap: 10px; align-items: center; margin-top: 10px; padding: 8px 14px 8px 20px; border-radius: 12px; background: #fff; box-shadow: 0 2px 14px rgba(30,30,50,.06); }
.xp-svc .sv-bl h2 { font-size: 20px; line-height: 22px; font-weight: 700; color: #12132A; margin: 3px 0 4px; letter-spacing: -0.02em; }
.xp-svc .sv-bl h2 span { color: var(--xo); }
.xp-svc .sv-bl p { margin: 0; font-size: 9.8px; line-height: 12px; color: #4D515C; }
.xp-svc .sv-tiles { display: grid; grid-template-columns: 106px 100px 101px 100px 100px 106px 115px 111px 135px; gap: 9px; }
.xp-svc .sv-tile { height: 94px; border-radius: 10px; background: #FFF6F0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-decoration: none; color: #1C1D22; font-size: 10.3px; font-weight: 600; text-align: center; line-height: 12px; border: 1px solid transparent; }
.xp-svc .sv-tile .i { color: var(--xo); }
.xp-svc .sv-tile:hover { border-color: var(--xo); }
.xp-svc .sv-why { height: 104px; }
.xp-svc .sv-why5 { display: grid; grid-template-columns: 197px 212px 190px 198px 1fr; padding-left: 52px; }
.xp-svc .sv-why5 > div { display: flex; gap: 12px; align-items: center; }
.xp-svc .sv-why5 i { width: 44px; height: 44px; border-radius: 50%; background: #FFF4EC; color: var(--xo); display: grid; place-items: center; font-style: normal; flex: none; }
.xp-svc .sv-why5 b { display: block; font-size: 10.6px; font-weight: 600; color: #15161C; }
.xp-svc .sv-why5 small { display: block; font-size: 9.6px; line-height: 12px; color: #5B5F6A; margin-top: 3px; }
.xp-svc .sv-cta { display: grid; grid-template-columns: 784px 1fr; gap: 23px; margin-top: 8px; padding-left: 52px; padding-bottom: 36px; }
.xp-svc .sv-band { position: relative; border-radius: 16px; background: #1C0D04 url('/assets/design/p1-4/svc-cta.jpg') center / cover; padding: 22px 40px 26px 42px; color: #fff; }
.xp-svc .sv-band h2 { font-size: 23.5px; line-height: 28px; font-weight: 700; color: #fff; margin: 4px 0 4px; letter-spacing: -0.02em; }
.xp-svc .sv-band h2 span { color: #FF7A1A; }
.xp-svc .sv-band p { margin: 0 0 10px; font-size: 11.2px; color: #E7E7EA; }
.xp-svc .sv-bb { display: flex; gap: 12px; }
.xp-svc .sv-bw { width: 150px; height: 34px; background: #fff; color: #1A1B20; border-radius: 9px; font-size: 11.4px; }
.xp-svc .sv-bw .i { color: var(--xo); }
.xp-svc .sv-band .sv-b1 { width: 165px; height: 34px; border-radius: 9px; font-size: 11.4px; }
.xp-svc .sv-checks { position: absolute; left: 545px; top: 59px; list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.xp-svc .sv-checks li { display: flex; gap: 9px; align-items: center; font-size: 10.2px; color: #fff; }
.xp-svc .sv-checks i { width: 16px; height: 16px; border-radius: 50%; background: #FF8A1E; color: #fff; display: grid; place-items: center; }
.xp-svc .sv-form { border-radius: 14px; background: #fff; box-shadow: 0 4px 20px rgba(30,30,50,.08); padding: 11px 26px 14px 30px; margin-top: -7px; }
.xp-svc .sv-form h3 { font-size: 13.8px; font-weight: 700; color: #12132A; letter-spacing: -0.01em; }
.xp-svc .sv-form > p { margin: 2px 0 7px; font-size: 9.6px; color: #4D515C; }
.xp-svc .sv-fr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 7px; }
.xp-svc .sv-in { position: relative; display: block; }
.xp-svc .sv-in .i { position: absolute; left: 10px; top: 5px; color: #6B6E78; pointer-events: none; }
.xp-svc .sv-in input, .xp-svc .sv-in select, .xp-svc .sv-in textarea { width: 100%; height: 23px; border: 1px solid #E2E3E8; border-radius: 5px; padding: 0 8px 0 30px; font-size: 8.8px; font-family: inherit; color: #333; background: #fff; }
.xp-svc .sv-in textarea { height: 56px; padding: 6px 10px; resize: vertical; display: block; }
.xp-svc .sv-in select { color: #6B6E78; }
.xp-svc .sv-fb { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 8px; }
.xp-svc .sv-ck { display: flex; gap: 6px; align-items: center; font-size: 9.6px; color: #5B5F6A; }
.xp-svc .sv-ck a { color: var(--xo); }
.xp-svc .sv-sub { height: 30px; padding: 0 22px; border: 0; border-radius: 7px; background: var(--xg); color: #fff; font-size: 11.6px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; }
.xp-svc .field-error { font-size: 9.6px; }
@media (max-width: 1440px) { .xp-svc .sv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .xp-svc .sv-tiles { grid-template-columns: repeat(9, minmax(0, 1fr)); } .xp-svc .sv-cta { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .xp-svc .sv-why5 { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-left: 20px; } }
@media (max-width: 1100px) {
  .xp-svc .sv-w { padding: 0 20px; }
  .xp-svc .sv-hero { height: auto; display: flex; flex-direction: column-reverse; }
  .xp-svc .sv-hero-bg { position: relative; left: auto; transform: none; width: auto; height: 240px; align-self: flex-end; }
  .xp-svc .sv-hero-in { height: auto; padding: 24px 20px 10px; display: flex; flex-direction: column; gap: 12px; }
  .xp-svc .sv-hero-in > * { position: static !important; }
  .xp-svc .sv-hero h1 { font-size: clamp(34px, 7vw, 52px); line-height: 1.05; }
  .xp-svc .sv-hero p { line-height: 1.45; }
  .xp-svc .sv-btns { flex-wrap: wrap; }
  .xp-svc .sv-head { grid-template-columns: 1fr; height: auto; gap: 6px; padding-left: 0; }
  .xp-svc .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-svc .sv-proc { grid-template-columns: repeat(3, 1fr); height: auto; gap: 14px; padding: 14px; }
  .xp-svc .sv-arr { display: none; }
  .xp-svc .sv-box { grid-template-columns: 1fr; padding: 16px; }
  .xp-svc .sv-why { height: auto; }
  .xp-svc .sv-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xp-svc .sv-why5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; }
  .xp-svc .sv-cta { grid-template-columns: 1fr; padding-left: 20px; }
  .xp-svc .sv-checks { position: static; margin-top: 14px; }
  .xp-svc .sv-form { margin-top: 0; }
}
@media (max-width: 640px) {
  .xp-svc .sv-grid { grid-template-columns: 1fr; }
  .xp-svc .sv-card { height: auto; padding: 12px; gap: 0 12px; }
  .xp-svc .sv-proc, .xp-svc .sv-why5 { grid-template-columns: 1fr; }
  .xp-svc .sv-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xp-svc .sv-band { padding: 20px; }
  .xp-svc .sv-bb, .xp-svc .sv-fr { flex-wrap: wrap; grid-template-columns: 1fr; }
  .xp-svc .sv-fb { flex-wrap: wrap; }
  .xp-svc .sv-in input, .xp-svc .sv-in select { height: 34px; font-size: 13px; }
  .xp-svc .sv-ct small br { display: none; }
}
/* services fine-tuning */
.xp-svc .sv-hero h1 { font-size: 53px; letter-spacing: -0.012em; }
.xp-svc .sv-hero p { font-size: 15.8px; }
.xp-svc .sv-panel { padding-top: 0; }
.xp-svc .sv-head2 { margin-top: 4px; }
.xp-svc .sv-box { height: 106px; margin-top: 8px; padding-top: 0; padding-bottom: 0; grid-template-columns: 236px 1fr; }
.xp-svc .sv-why { height: 104px; }
.xp-svc .sv-cta { margin-top: 5px; }
.xp-svc .sv-card { gap: 0 31px; padding-right: 12px; }
.xp-svc .sv-ct b { font-size: 13.2px; }
.xp-svc .sv-ct small { font-size: 10.9px; line-height: 12.6px; }

/* ------------------------------ GALLERY (design 0c7a8a42, 1672 wide) ------------------------------ */
.xp-gal { background: #FCFAF8; position: relative; overflow: hidden; }
.xp-gal::before { content: ''; position: absolute; left: -220px; top: 560px; width: 560px; height: 600px; background: radial-gradient(closest-side, rgba(255,150,90,.20), transparent); pointer-events: none; }
.xp-gal .gl-w { max-width: 1672px; margin: 0 auto; padding: 0 60px 0 80px; position: relative; }
.xp-gal .gl-hero { position: relative; height: 204px; }
.xp-gal .gl-hero-bg { position: absolute; left: 50%; top: 0; width: 1672px; height: 204px; transform: translateX(-50%); display: block; }
.xp-gal .gl-hero-in { height: 204px; padding-left: 158px; }
.xp-gal .gl-lab { display: inline-flex; align-items: center; gap: 10px; font-size: 10.2px; font-weight: 600; letter-spacing: .1em; color: #3F4350; }
.xp-gal .gl-lab::before { content: ''; width: 12px; height: 3px; border-radius: 2px; background: var(--xo); }
.xp-gal .gl-lab-w { color: #F3F3F5; }
.xp-gal .gl-hero-in .gl-lab { position: absolute; top: 15px; }
.xp-gal .gl-hero h1 { position: absolute; top: 34px; font-size: 55px; line-height: 50px; font-weight: 700; letter-spacing: -0.02em; color: #0B0B0D; }
.xp-gal .gl-hero h1 span { color: var(--xo); }
.xp-gal .gl-hero p { position: absolute; top: 137px; margin: 0; font-size: 15.6px; line-height: 19px; color: #2D3039; letter-spacing: -0.008em; }
.xp-gal .gl-panel-w { padding-left: 60px; padding-right: 60px; }
.xp-gal .gl-panel { background: #fff; border-radius: 28px; padding: 9px 14px 14px 20px; box-shadow: 0 -4px 30px rgba(255,140,80,.08), 0 8px 30px rgba(30,30,50,.05); }
.xp-gal .gl-tools { display: flex; gap: 18px; align-items: center; height: 31px; margin-bottom: 12px; padding-left: 5px; }
.xp-gal .gl-search { width: 459px; height: 31px; flex: none; display: flex; align-items: center; gap: 12px; border: 1px solid #E3E4E9; border-radius: 16px; padding: 0 12px; color: #1A1B1F; background: #fff; }
.xp-gal .gl-search input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 11.3px; font-family: inherit; color: #333; background: transparent; }
.xp-gal .gl-search input::placeholder { color: #6C6F79; }
.xp-gal .gl-search:focus-within { border-color: var(--xo); }
.xp-gal .gl-pills { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.xp-gal .gl-pills button { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 29px; padding: 0 14px; border: 1px solid #E3E4E9; background: #fff; border-radius: 15px; font-size: 10.8px; font-weight: 500; color: #23252B; font-family: inherit; cursor: pointer; }
.xp-gal .gl-pills button .i { color: #23252B; }
.xp-gal .gl-pills button[aria-pressed=true] { background: var(--xg); border-color: transparent; color: #fff; font-size: 11.6px; font-weight: 600; padding: 0 18px; box-shadow: 0 6px 14px -8px rgba(254,66,0,.8); }
.xp-gal .gl-pills button[aria-pressed=true] .i { color: #fff; }
.xp-gal .gl-sort { height: 29px; border: 1px solid #E3E4E9; border-radius: 15px; padding: 0 8px; font-size: 10.6px; color: #555; background: #fff; font-family: inherit; }
.xp-gal .gl-grid { display: grid; grid-template-columns: repeat(6, 235px); column-gap: 20px; row-gap: 9px; margin-left: -1px; }
.xp-gal .gc { position: relative; height: 143px; border-radius: 10px; background: #fff; box-shadow: 0 1px 10px rgba(30,30,50,.08); padding: 2px 12px 0 15px; display: flex; flex-direction: column; }
.xp-gal .gc:hover { box-shadow: 0 4px 16px rgba(254,90,0,.18); }
.xp-gal .gc-n { position: absolute; left: 9px; top: 10px; height: 18px; min-width: 23px; padding: 0 4px; border-radius: 4px; background: var(--xo); color: #fff; font-size: 10.6px; font-weight: 700; display: grid; place-items: center; z-index: 1; }
.xp-gal .gc-img { display: block; margin: 0 0 0 23px; height: 70px; }
.xp-gal .gc-img img { width: 178px; height: 70px; display: block; }
.xp-gal .gc h3 { font-size: 13px; line-height: 15px; font-weight: 600; margin: 1px 0 1px; letter-spacing: -0.01em; white-space: nowrap; }
.xp-gal .gc h3 a { color: #15161C; text-decoration: none; }
.xp-gal .gc p { margin: 0; font-size: 11.2px; line-height: 11.4px; color: #3D404A; height: 23px; overflow: hidden; }
.xp-gal .gc-a { display: grid; grid-template-columns: 98px 96px; gap: 14px; margin-top: 8px; }
.xp-gal .gc-a a { height: 19px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 9.4px; font-weight: 600; text-decoration: none; }
.xp-gal .gc-live { background: var(--xg); color: #fff; }
.xp-gal .gc-det { border: 1px solid #E1E2E7; color: #1A1B1F; background: #fff; }
.xp-gal .gl-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 6px; padding: 40px 0; color: #6B6E78; }
.xp-gal .gl-empty a { color: var(--xo); }
.xp-gal .gl-how { display: grid; grid-template-columns: 400px 268px 276px 278px 1fr; align-items: center; height: 92px; margin-top: 8px; padding-left: 86px; }
.xp-gal .gl-how-t h2 { font-size: 22.4px; line-height: 26px; font-weight: 700; color: #0E0F14; margin: 3px 0 4px; letter-spacing: -0.02em; }
.xp-gal .gl-how-t h2 span { color: var(--xo); }
.xp-gal .gl-how-t p { margin: 0; font-size: 13px; line-height: 13px; color: #4D515C; }
.xp-gal .gl-step { position: relative; display: flex; gap: 18px; align-items: center; }
.xp-gal .gl-si { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #FFF3EA, #FFE4D2); color: var(--xo); display: grid; place-items: center; flex: none; }
.xp-gal .gl-step em { display: block; font-style: normal; color: var(--xo); font-weight: 700; font-size: 12.6px; }
.xp-gal .gl-step b { display: block; font-size: 12.6px; font-weight: 600; color: #111; margin-top: 2px; }
.xp-gal .gl-step small { display: block; font-size: 10.8px; line-height: 10.6px; color: #4D515C; margin-top: 2px; }
.xp-gal .gl-arr { position: absolute; right: 18px; top: 26px; color: #111; }
.xp-gal .gl-cta { display: grid; grid-template-columns: 909px 1fr; gap: 12px; margin-top: 8px; padding-left: 76px; padding-right: 76px; padding-bottom: 30px; }
.xp-gal .gl-band { position: relative; border-radius: 14px; background: #1C0D04 url('/assets/design/p1-4/gal-cta.jpg') center / cover; padding: 17px 30px 16px 35px; color: #fff; }
.xp-gal .gl-band h2 { font-size: 24.4px; line-height: 28px; font-weight: 700; color: #fff; margin: 3px 0 3px; letter-spacing: -0.02em; }
.xp-gal .gl-band h2 span { color: #FF7A1A; }
.xp-gal .gl-band p { margin: 0 0 8px; font-size: 11.4px; color: #EDEDF0; }
.xp-gal .gl-bb { display: flex; gap: 8px; }
.xp-gal .gl-bw, .xp-gal .gl-bo { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 30px; border-radius: 15px; font-size: 11.6px; font-weight: 600; text-decoration: none; }
.xp-gal .gl-bw { width: 175px; background: #fff; color: #1A1B20; }
.xp-gal .gl-bw .i { color: var(--xo); }
.xp-gal .gl-bo { width: 179px; background: var(--xg); color: #fff; }
.xp-gal .gl-checks { position: absolute; left: 565px; top: 24px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 165px 140px; row-gap: 14px; }
.xp-gal .gl-checks li { display: flex; gap: 10px; align-items: center; font-size: 10.8px; color: #fff; }
.xp-gal .gl-checks i { width: 18px; height: 18px; border-radius: 50%; background: #FF8A1E; color: #fff; display: grid; place-items: center; }
.xp-gal .gl-form { border-radius: 12px; background: #fff; box-shadow: 0 4px 20px rgba(30,30,50,.08); padding: 9px 16px 12px 19px; }
.xp-gal .gl-form h3 { font-size: 13.2px; font-weight: 700; color: #12132A; }
.xp-gal .gl-form > p { margin: 1px 0 6px; font-size: 9.2px; color: #4D515C; }
.xp-gal .gl-fg { display: grid; grid-template-columns: 206px 186px 1fr; gap: 6px 6px; align-items: center; }
.xp-gal .gl-in { position: relative; display: block; }
.xp-gal .gl-in .i { position: absolute; left: 9px; top: 5px; color: #6B6E78; pointer-events: none; }
.xp-gal .gl-in input, .xp-gal .gl-in select, .xp-gal .gl-in textarea { width: 100%; height: 22px; border: 1px solid #E2E3E8; border-radius: 4px; padding: 0 8px 0 28px; font-size: 8.4px; font-family: inherit; color: #333; background: #fff; }
.xp-gal .gl-in select { color: #6B6E78; }
.xp-gal .gl-ta { grid-column: 1 / 3; }
.xp-gal .gl-in textarea { height: 40px; padding: 5px 9px; resize: vertical; display: block; }
.xp-gal .gl-sub { grid-row: 1 / 3; grid-column: 3; align-self: center; height: 30px; border: 0; border-radius: 7px; background: var(--xg); color: #fff; font-size: 11.4px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-family: inherit; margin-left: 9px; }
.xp-gal .gl-ck { display: flex; gap: 5px; align-items: center; font-size: 8.6px; color: #5B5F6A; }
.xp-gal .gl-ck a { color: var(--xo); }
.xp-gal .field-error { font-size: 9px; grid-column: 1 / -1; }

@media (max-width: 1660px) {
  .xp-gal .gl-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 14px; }
  .xp-gal .gc-img img { width: 100%; height: auto; aspect-ratio: 178 / 70; }
  .xp-gal .gc-img { height: auto; margin-left: 18px; }
  .xp-gal .gc { height: auto; padding-bottom: 10px; }
  .xp-gal .gc-a { grid-template-columns: 1fr 1fr; gap: 8px; }
  .xp-gal .gl-pills { flex-wrap: wrap; }
  .xp-gal .gl-tools { height: auto; flex-wrap: wrap; }
  .xp-gal .gl-how { grid-template-columns: 1.4fr repeat(4, 1fr); padding-left: 20px; }
  .xp-gal .gl-cta { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); padding-left: 60px; padding-right: 60px; }
  .xp-gal .gl-checks { left: auto; right: 24px; }
}
@media (max-width: 1250px) {
  .xp-gal .gl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xp-gal .gl-how { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; gap: 18px; }
  .xp-gal .gl-how-t { grid-column: 1 / -1; }
  .xp-gal .gl-arr { display: none; }
  .xp-gal .gl-cta { grid-template-columns: 1fr; }
  .xp-gal .gl-checks { position: static; margin-top: 16px; }
}
@media (max-width: 900px) {
  .xp-gal .gl-w, .xp-gal .gl-panel-w, .xp-gal .gl-cta { padding-left: 16px; padding-right: 16px; }
  .xp-gal .gl-hero { height: auto; display: flex; flex-direction: column-reverse; }
  .xp-gal .gl-hero-bg { position: relative; left: auto; transform: none; width: auto; height: 190px; align-self: flex-end; }
  .xp-gal .gl-hero-in { height: auto; padding: 22px 16px 10px; display: flex; flex-direction: column; gap: 10px; }
  .xp-gal .gl-hero-in > * { position: static !important; }
  .xp-gal .gl-hero h1 { font-size: clamp(34px, 8vw, 55px); line-height: 1.02; }
  .xp-gal .gl-hero p { line-height: 1.45; }
  .xp-gal .gl-search { width: 100%; flex: 1 1 100%; }
  .xp-gal .gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-gal .gl-panel { padding: 12px; }
  .xp-gal .gl-how { padding-left: 16px; }
  .xp-gal .gl-fg { grid-template-columns: 1fr; }
  .xp-gal .gl-ta { grid-column: auto; }
  .xp-gal .gl-sub { grid-row: auto; grid-column: auto; margin: 0; }
  .xp-gal .gl-in input, .xp-gal .gl-in select { height: 34px; font-size: 13px; }
  .xp-gal .gl-band { padding: 20px; }
  .xp-gal .gl-bb { flex-wrap: wrap; }
  .xp-gal .gl-checks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) { .xp-gal .gl-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .xp-gal .gc h3 { white-space: normal; } .xp-gal .gc p { height: auto; } .xp-gal .gl-how { grid-template-columns: 1fr; } }
/* gallery fine-tuning */
.xp-gal .gl-hero { margin-bottom: -4px; }
.xp-gal .gl-hero-in .gl-lab { top: 11px; }
.xp-gal .gl-hero h1 { top: 30px; }
.xp-gal .gl-hero p { top: 133px; }
.xp-gal .gc p { font-size: 11.6px; max-width: 192px; letter-spacing: -0.005em; }
.xp-gal .gl-panel { padding-bottom: 8px; }
.xp-gal .gl-how { margin-top: 0; height: 84px; align-items: start; padding-top: 8px; }
.xp-gal .gl-cta { margin-top: 0; }
.xp-gal .gl-hero { margin-bottom: -12px; }
.xp-gal .gl-how { grid-template-columns: 400px 292px 276px 278px 1fr; }

/* ------------------------------ DETAILS (design fc7d50aa right half, measured at 2× = 1461 wide) ------------------------------ */
.xp-det { background: #FBFCFD; }
.xp-det .dt-w { max-width: 1461px; margin: 0 auto; padding: 0 46px 0 67px; position: relative; }
.xp-det .dt-hero { position: relative; height: 607px; overflow: hidden; background: linear-gradient(90deg, #F7F8FA 0%, #F8F7F7 40%, #FBF3EE 70%, #F7E6DC 100%); }
.xp-det .dt-hero-img { position: absolute; top: 0; right: 0; width: 856px; height: 618px; left: calc(50% - 730px + 605px); }
.xp-det .dt-hero-img img { width: 856px; height: 618px; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px); mask-image: linear-gradient(90deg, transparent 0, #000 80px); }
.xp-det .dt-mock { position: absolute; left: 30px; top: 60px; width: 760px; }
.xp-det .dt-mock .laptop { max-width: none; }
.xp-det .dt-hero-in { height: 607px; }
.xp-det .dt-crumbs { position: absolute; top: 25px; display: flex; align-items: center; gap: 12px; font-size: 16.6px; color: #3A3D47; }
.xp-det .dt-crumbs a { color: #3A3D47; text-decoration: none; }
.xp-det .dt-crumbs a:hover { color: var(--xo); }
.xp-det .dt-crumbs .i { color: #3A3D47; }
.xp-det .dt-tag { position: absolute; top: 104px; display: flex; align-items: center; gap: 18px; font-size: 15.4px; font-weight: 500; color: #2E3038; }
.xp-det .dt-tag span { width: 66px; height: 66px; border-radius: 14px; background: #FFEADB; color: var(--xo); display: grid; place-items: center; }
.xp-det .dt-hero h1 { position: absolute; top: 178px; font-size: 50px; line-height: 61px; font-weight: 700; letter-spacing: -0.02em; color: #0E0F14; }
.xp-det .dt-lead { position: absolute; top: 314px; margin: 0; width: 600px; font-size: 18.3px; line-height: 30px; color: #2E3038; letter-spacing: -0.01em; }
.xp-det .dt-btns { position: absolute; top: 403px; display: flex; gap: 22px; }
.xp-det .dt-b1, .xp-det .dt-b2, .xp-det .dt-b3 { display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; font-weight: 600; }
.xp-det .dt-b1 { width: 258px; height: 70px; border-radius: 12px; background: linear-gradient(90deg, #FE6A12, #FE4C00); color: #fff; font-size: 21px; box-shadow: 0 10px 22px -10px rgba(254,76,0,.7); }
.xp-det .dt-b2 { width: 298px; height: 70px; border-radius: 12px; background: #fff; border: 2px solid #FE8A55; color: #15161C; font-size: 21px; }
.xp-det .dt-b2 .i, .xp-det .dt-b3 .i { color: var(--xo); }
.xp-det .dt-b3 { position: absolute; top: 494px; width: 218px; height: 52px; border-radius: 10px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); color: #15161C; font-size: 18px; }
.xp-det .dt-mods { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px; padding-left: 47px; padding-right: 46px; margin-top: 23px; }
.xp-det .dt-mod { height: 140px; border-radius: 16px; background: #fff; border: 1px solid #EEEFF2; box-shadow: 0 2px 10px rgba(30,30,50,.04); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.xp-det .dt-mod span { width: 52px; height: 52px; border-radius: 50%; background: #FFF1E7; color: var(--xo); display: grid; place-items: center; }
.xp-det .dt-mod b { font-size: 15.4px; line-height: 25px; font-weight: 400; color: #3A3D47; }
.xp-det .dt-main { display: grid; grid-template-columns: 570px 404px 293px; gap: 0; margin-top: 46px; padding-left: 55px; }
.xp-det .dt-media { position: relative; width: 570px; height: 468px; border-radius: 14px; overflow: hidden; background: #2A2B2F; }
.xp-det .dt-media img { width: 570px; height: 468px; display: block; }
.xp-det .dt-mock2 { position: absolute; left: 40px; right: 40px; top: 70px; }
.xp-det .dt-mock2 .laptop { max-width: none; }
.xp-det .dt-play { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 50%; background: rgba(30,30,32,.85); color: #fff; display: grid; place-items: center; }
.xp-det .dt-pill { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: inline-flex; gap: 10px; align-items: center; height: 58px; padding: 0 26px; border-radius: 29px; background: #fff; color: var(--xo); font-weight: 600; font-size: 18px; white-space: nowrap; }
.xp-det .dt-pill i { width: 24px; height: 24px; border-radius: 50%; background: var(--xo); color: #fff; display: grid; place-items: center; }
.xp-det .dt-mbtn { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }
.xp-det .dt-mbtn:focus-visible { outline: 3px solid var(--xo); outline-offset: -3px; }
.xp-det .dt-kf { padding: 13px 0 0 68px; }
.xp-det .dt-kf h3 { font-size: 21px; font-weight: 600; color: #0E0F14; padding-bottom: 12px; position: relative; }
.xp-det .dt-kf h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 75px; height: 3px; border-radius: 2px; background: var(--xo); }
.xp-det .dt-kf ul { list-style: none; margin: 21px 0 0; padding: 0; display: grid; gap: 14.3px; }
.xp-det .dt-kf li { display: flex; align-items: center; gap: 15px; font-size: 17px; line-height: 24px; color: #3A3D47; white-space: nowrap; }
.xp-det .dt-kf li i { width: 20px; height: 20px; border-radius: 50%; background: var(--xo); color: #fff; display: grid; place-items: center; flex: none; margin-left: -14px; }
.xp-det .dt-pf { width: 293px; height: 478px; margin-top: -6px; border-radius: 16px; background: #fff; border: 1px solid #EEEFF2; box-shadow: 0 4px 16px rgba(30,30,50,.05); padding: 32px 18px 0 32px; }
.xp-det .dt-pf h3 { font-size: 23px; font-weight: 600; color: #0E0F14; margin-bottom: 24px; }
.xp-det .dt-pf > div { display: flex; align-items: center; gap: 22px; height: 64.5px; font-size: 16px; color: #3A3D47; }
.xp-det .dt-pf > div i { width: 38px; height: 38px; border-radius: 8px; background: var(--xo); color: #fff; display: grid; place-items: center; flex: none; }
.xp-det .dt-why { margin: 24px 0 0 33px; width: 1352px; border-radius: 22px; background: #fff; border: 1px solid #EEEFF2; padding: 33px 33px 22px 33px; }
.xp-det .dt-why h2 { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 700; color: #0E0F14; margin-bottom: 26px; }
.xp-det .dt-why h2 span { position: relative; width: 18px; height: 20px; }
.xp-det .dt-why h2 span i { position: absolute; width: 10px; height: 16px; border-radius: 3px; background: var(--xo); transform: skewX(-18deg); }
.xp-det .dt-why h2 span i:first-child { left: 0; top: 2px; } .xp-det .dt-why h2 span i:last-child { left: 8px; top: 0; opacity: .7; }
.xp-det .dt-why4 { display: grid; grid-template-columns: 307px 307px 313px 312px; gap: 0 22px; margin-left: 2px; }
.xp-det .dt-why4 > div { height: 211px; border-radius: 16px; border: 1px solid #EEEFF2; background: #fff; padding: 28px 28px 0 30px; }
.xp-det .dt-why4 i { width: 64px; height: 64px; border-radius: 50%; background: #FFEDE1; color: var(--xo); display: grid; place-items: center; font-style: normal; margin-bottom: 18px; }
.xp-det .dt-why4 b { display: block; font-size: 20px; font-weight: 600; color: #0E0F14; margin-bottom: 9px; }
.xp-det .dt-why4 small { display: block; font-size: 17px; line-height: 31px; color: #4D515C; max-width: 240px; }
.xp-det .dt-cta { position: relative; height: 330px; margin-top: 34px; background: radial-gradient(500px 260px at 82% 70%, rgba(254,90,0,.55), transparent 70%), linear-gradient(90deg, #060708 0%, #0A0A0C 45%, #1B0D05 70%, #3C1A07 100%); overflow: hidden; color: #fff; }
.xp-det .dt-cta-img { position: absolute; top: -63px; left: calc(50% - 730px + 805px); width: 656px; height: 358px; }
.xp-det .dt-cta-img img { width: 656px; height: 358px; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70px); mask-image: linear-gradient(90deg, transparent 0, #000 70px); }
.xp-det .dt-mock3 { position: absolute; left: 110px; top: 90px; width: 420px; }
.xp-det .dt-mock3 .laptop { max-width: none; }
.xp-det .dt-chip { position: absolute; display: inline-flex; gap: 10px; align-items: center; height: 46px; padding: 0 16px 0 10px; border-radius: 12px; background: #fff; color: #15161C; font-weight: 600; font-size: 15px; white-space: nowrap; box-shadow: 0 10px 22px rgba(0,0,0,.3); }
.xp-det .dt-chip i { width: 28px; height: 28px; border-radius: 50%; background: var(--xo); color: #fff; display: grid; place-items: center; }
.xp-det .dt-chip0 { left: -60px; top: -40px; } .xp-det .dt-chip1 { right: -110px; top: -50px; } .xp-det .dt-chip2 { left: -50px; top: 120px; } .xp-det .dt-chip3 { right: -110px; top: 120px; }
.xp-det .dt-cta-in { padding-top: 48px; }
.xp-det .dt-cta h2 { font-size: 35px; line-height: 44px; font-weight: 700; color: #fff; letter-spacing: -0.015em; }
.xp-det .dt-cta p { margin: 15px 0 0; font-size: 18.4px; color: #E4E5E8; }
.xp-det .dt-cb { display: flex; gap: 22px; margin-top: 34px; }
.xp-det .dt-cb a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 70px; border-radius: 10px; font-size: 19.5px; font-weight: 500; text-decoration: none; }
.xp-det .dt-c1 { width: 225px; background: linear-gradient(90deg, #FE6A12, #FE4C00); color: #fff; }
.xp-det .dt-c2 { width: 233px; border: 2px solid #FE5A12; color: #fff; }
.xp-det .dt-c3 { width: 247px; border: 1.5px solid #7A3A16; color: #fff; }
.xp-det .dt-c3 .i { color: #fff; }
@media (max-width: 1460px) {
  .xp-det .dt-hero-img { left: auto; right: 0; }
  .xp-det .dt-main { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .75fr); padding-left: 47px; padding-right: 46px; }
  .xp-det .dt-media, .xp-det .dt-media img { width: 100%; height: auto; }
  .xp-det .dt-media { aspect-ratio: 570 / 468; }
  .xp-det .dt-kf { padding-left: 32px; }
  .xp-det .dt-kf li { white-space: normal; font-size: 15px; }
  .xp-det .dt-pf { width: auto; height: auto; padding-bottom: 14px; }
  .xp-det .dt-why { width: auto; margin-left: 0; }
  .xp-det .dt-why4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xp-det .dt-cta-img { left: auto; right: 0; }
}
@media (max-width: 1100px) {
  .xp-det .dt-w, .xp-det .dt-mods { padding-left: 20px; padding-right: 20px; }
  .xp-det .dt-hero { height: auto; display: flex; flex-direction: column-reverse; }
  .xp-det .dt-hero-img { position: relative; width: 100%; height: auto; left: auto; }
  .xp-det .dt-hero-img img { width: 100%; height: auto; -webkit-mask-image: none; mask-image: none; }
  .xp-det .dt-mock { position: relative; left: auto; top: auto; width: 92%; margin: 0 auto 20px; }
  .xp-det .dt-hero-in { height: auto; padding-top: 18px; padding-bottom: 20px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
  .xp-det .dt-hero-in > *, .xp-det .dt-b3 { position: static !important; }
  .xp-det .dt-crumbs { flex-wrap: wrap; font-size: 14px; }
  .xp-det .dt-hero h1 { font-size: clamp(30px, 6vw, 50px); line-height: 1.15; }
  .xp-det .dt-lead { width: auto; font-size: 16px; line-height: 1.6; }
  .xp-det .dt-btns { flex-wrap: wrap; gap: 12px; }
  .xp-det .dt-b1, .xp-det .dt-b2 { width: auto; padding: 0 24px; height: 56px; font-size: 17px; }
  .xp-det .dt-b3 { height: 48px; font-size: 16px; }
  .xp-det .dt-mods { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .xp-det .dt-main { grid-template-columns: 1fr 1fr; gap: 24px; padding-left: 20px; padding-right: 20px; }
  .xp-det .dt-media { grid-column: 1 / -1; }
  .xp-det .dt-kf { padding: 0; }
  .xp-det .dt-kf li i { margin-left: 0; }
  .xp-det .dt-pf { margin: 0; }
  .xp-det .dt-why { padding: 20px; }
  .xp-det .dt-why4 { grid-template-columns: 1fr 1fr; gap: 14px; }
  .xp-det .dt-why4 > div { height: auto; padding: 20px; }
  .xp-det .dt-why4 small { font-size: 15px; line-height: 1.5; }
  .xp-det .dt-cta { height: auto; padding-bottom: 30px; }
  .xp-det .dt-cta-img { display: none; }
  .xp-det .dt-cta h2 { font-size: 28px; line-height: 1.2; }
  .xp-det .dt-cb { flex-wrap: wrap; gap: 12px; }
  .xp-det .dt-cb a { width: auto; padding: 0 22px; height: 54px; font-size: 16px; }
}
@media (max-width: 640px) {
  .xp-det .dt-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-det .dt-main, .xp-det .dt-why4 { grid-template-columns: 1fr; }
  .xp-det .dt-pill { font-size: 14px; height: 44px; padding: 0 16px; }
  .xp-det .dt-play { width: 60px; height: 60px; }
}
/* details fine-tuning */
.xp-det .dt-hero h1 { font-size: 51.5px; }
.xp-det .dt-lead { width: 590px; font-size: 18.6px; }
.xp-det .dt-mod { justify-content: flex-start; padding-top: 26px; gap: 14px; }
.xp-det .dt-mod b { max-width: 128px; }
.xp-det .dt-main { grid-template-columns: 570px 495px 293px; }
.xp-det .dt-why { margin-left: -4px; width: 1356px; padding: 30px 27px 22px 27px; }
.xp-det .dt-why h2 { margin-left: 4px; margin-bottom: 26px; }
.xp-det .dt-why4 { grid-template-columns: 303px 314px 316px 1fr; gap: 0 30px; margin-left: 0; }
.xp-det .dt-why4 > div { padding: 26px 22px 0 20px; }
@media (max-width: 1460px) { .xp-det .dt-main { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, .75fr); } .xp-det .dt-why { width: auto; margin-left: 0; } .xp-det .dt-why4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 18px; } }
@media (max-width: 1100px) { .xp-det .dt-main { grid-template-columns: 1fr 1fr; } .xp-det .dt-why4 { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (max-width: 640px) { .xp-det .dt-main, .xp-det .dt-why4 { grid-template-columns: 1fr; } }
.xp-det .dt-kf ul { margin-top: 29px; }
.xp-det .dt-why4 > div { padding: 22px 16px 0 14px; }
.xp-det .dt-why4 i { margin-bottom: 14px; }
.xp-det .dt-why4 small { font-size: 18px; max-width: 270px; }
.xp-det .dt-cb { margin-top: 18px; }
@media (max-width: 1100px) { .xp-det .dt-why4 > div { padding: 20px; } .xp-det .dt-why4 small { font-size: 15px; } }
/* responsive fixes */
@media (max-width: 1420px) {
  .xp-home .hw-in { flex-direction: column; }
  .xp-home .hcf { width: auto; max-width: 640px; margin: 0 0 24px; }
  .xp-home .hcf-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1400px) {
  .xp-gal .gl-how { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; gap: 18px; padding-top: 16px; }
  .xp-gal .gl-how-t { grid-column: 1 / -1; }
  .xp-gal .gl-arr { display: none; }
}
.xp-gal .gl-step, .xp-gal .gl-step > span { min-width: 0; }
@media (max-width: 1250px) { .xp-gal .gl-cta { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .xp-home .hcf-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1100px) {
  .xp-svc .sv-box, .xp-svc .sv-why { height: auto; padding: 16px; grid-template-columns: 1fr; }
  .xp-svc .sv-tile { height: 84px; }
  .xp-svc .sv-ct small { font-size: 11.5px; line-height: 1.35; }
  .xp-svc .sv-ct b { font-size: 14px; }
}
@media (max-width: 900px) { .xp-gal .gl-fg { display: flex; flex-direction: column; align-items: stretch; } .xp-gal .gl-fg > span:empty { display: none; } .xp-gal .gl-sub { order: 10; height: 40px; } .xp-gal .gl-ck { order: 9; font-size: 11px; } .xp-gal .gc p { font-size: 11px; } }
.xp-det .dt-mbtn { z-index: 6; } .xp-det .dt-play, .xp-det .dt-pill { z-index: 5; }