.cross-border-page { --cross:#245fe7; --cross-dark:#07152d; }
.cross-hero { min-height:0; padding:46px 0; overflow:hidden; color:#fff; background:radial-gradient(circle at 82% 18%,rgba(74,142,255,.3),transparent 28%),linear-gradient(125deg,#061329,#0b2b61 58%,#145de1); }
.cross-hero:before { display:none; }
.cross-hero-grid { min-height:470px; display:grid; grid-template-columns:minmax(0,.86fr) minmax(480px,1.14fr); align-items:center; gap:54px; }
.cross-hero .service-hero-copy { width:auto; max-width:none; }
.cross-hero .eyebrow { color:#dce9ff; border-color:#416ba8; background:#102d59; }
.service-hero.cross-hero h1 { margin:17px 0 7px; color:#fff; font-size:clamp(40px,4.3vw,58px); line-height:1.08; letter-spacing:-2px; text-shadow:0 8px 28px rgba(0,26,75,.18); }
.service-hero.cross-hero .hero-subtitle { max-width:560px; margin:0 0 16px; color:#67e6c0; font-size:clamp(25px,2.35vw,33px); line-height:1.3; }
.service-hero.cross-hero .service-hero-copy>p { max-width:680px; color:#d5e1f3; font-size:16px; line-height:1.9; }
.service-hero.cross-hero .hero-actions>a:not(.btn) { color:#174caa; border-color:#d7e4f6; background:#fff; }
.cross-ghost { align-self:center; color:#dae7fb; font-size:13px; font-weight:750; }
.cross-tags { margin-top:24px; display:flex; flex-wrap:wrap; gap:9px; }
.cross-tags span { padding:8px 11px; border:1px solid #ffffff24; border-radius:999px; color:#dce8fa; background:#ffffff0d; font-size:11px; }
.cross-browser { overflow:hidden; border:1px solid #ffffff35; border-radius:22px; color:#13223b; background:#fff; box-shadow:0 38px 90px rgba(0,0,0,.3); transform:perspective(1200px) rotateY(-4deg) rotateX(1deg); }
.cross-browser-bar { height:42px; padding:0 15px; display:flex; align-items:center; gap:7px; background:#eef3fb; }
.cross-browser-bar i { width:8px; height:8px; border-radius:50%; background:#b9c5d8; }.cross-browser-bar i:first-child { background:#ff7b70; }.cross-browser-bar i:nth-child(2) { background:#ffc760; }.cross-browser-bar i:nth-child(3) { background:#54d498; }
.cross-browser-bar span { margin-left:10px; padding:6px 30px; border-radius:20px; color:#7b8ba2; background:#fff; font-size:9px; }
.cross-browser-nav { padding:17px 20px; display:flex; align-items:center; gap:19px; border-bottom:1px solid #edf1f7; font-size:9px; }.cross-browser-nav b { margin-right:auto; color:#174ebc; font-size:13px; }.cross-browser-nav em { color:#5c6d84; font-style:normal; }
.cross-browser-main { min-height:250px; padding:29px; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:25px; background:linear-gradient(135deg,#f8fbff,#eaf2ff); }.cross-browser-main small { color:#2b65d8; font-size:8px; font-weight:900; letter-spacing:1.3px; }.cross-browser-main strong { margin:11px 0; display:block; color:#0e1c34; font-size:25px; line-height:1.18; }.cross-browser-main p { color:#74849b; font-size:10px; line-height:1.6; }.cross-browser-main button { padding:9px 13px; border:0; border-radius:7px; color:#fff; background:#2461e8; font-size:9px; }
.cross-product { position:relative; min-height:220px; padding:20px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; border-radius:18px; color:#fff; background:linear-gradient(145deg,#15418e,#27a3cb); }.cross-product:before,.cross-product:after { content:""; position:absolute; border:18px solid #ffffff25; border-radius:50%; }.cross-product:before { width:170px; height:170px; right:-60px; top:-50px; }.cross-product:after { width:90px; height:90px; left:-35px; bottom:-40px; }.cross-product>span { position:absolute; top:17px; left:17px; padding:5px 7px; border-radius:5px; background:#ffffff24; font-size:8px; }.cross-product i { width:78px; height:78px; margin:auto; border:14px solid #ffffffbd; border-radius:24px; transform:rotate(12deg); }.cross-product b,.cross-product small { position:relative; z-index:1; display:block; }.cross-product small { margin-top:4px; color:#cbe8fb; }
.cross-browser-foot { padding:14px 18px; display:flex; gap:8px; align-items:center; }.cross-browser-foot span { padding:5px 8px; border-radius:5px; background:#eef4ff; color:#4c6385; font-size:8px; }.cross-browser-foot b { margin-left:auto; color:#2b7a64; font-size:8px; }
.cross-capability-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.cross-capability-grid article { min-height:245px; padding:28px; border:1px solid var(--line); border-radius:18px; background:#fff; transition:.22s; }.cross-capability-grid article:hover { transform:translateY(-4px); border-color:#b9cef6; box-shadow:0 18px 38px rgba(31,78,150,.08); }.cross-capability-grid article>span { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:#edf4ff; }.cross-capability-grid img { width:27px; height:27px; }.cross-capability-grid h3 { margin:27px 0 10px; font-size:19px; }.cross-capability-grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.8; }
.cross-soft { background:#f5f8fe; }.cross-mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.cross-mode-grid article { padding:31px; border:1px solid var(--line); border-radius:20px; background:#fff; }.cross-mode-grid article.featured { border-color:#8fb2f5; box-shadow:0 20px 48px rgba(37,95,216,.1); }.cross-mode-grid b { color:var(--cross); font-size:11px; letter-spacing:1px; }.cross-mode-grid h3 { margin:20px 0 12px; font-size:23px; }.cross-mode-grid p { min-height:92px; margin:0; color:var(--muted); font-size:13px; line-height:1.8; }.cross-mode-grid ul { margin:20px 0 0; padding:17px 0 0; display:grid; gap:9px; border-top:1px solid var(--line); list-style:none; color:#425873; font-size:12px; }.cross-mode-grid li:before { content:"✓"; margin-right:8px; color:#20bc8d; font-weight:900; }
.cross-global { background:#fff; }.cross-global-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; }.cross-global h2 { margin:17px 0; font-size:clamp(34px,4vw,50px); line-height:1.2; letter-spacing:-1.7px; }.cross-global p { color:var(--muted); line-height:1.9; }.cross-language-list { margin-top:25px; display:flex; flex-wrap:wrap; gap:9px; }.cross-language-list span { padding:9px 12px; border:1px solid #dce6f6; border-radius:9px; color:#36506f; background:#f8fbff; font-size:11px; }.cross-global-points { display:grid; gap:13px; }.cross-global-points article { padding:23px 25px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 12px 30px rgba(30,74,140,.05); }.cross-global-points b { font-size:17px; }.cross-global-points p { margin:8px 0 0; font-size:13px; line-height:1.75; }
.cross-payments { color:#fff; background:radial-gradient(circle at 80% 0,rgba(46,112,232,.2),transparent 30%),var(--cross-dark); }.cross-payments .section-head h2 { color:#fff; }.cross-payments .section-head p { color:#9eb0ca; }.cross-payments .eyebrow { color:#dbe8ff; border-color:#2f4e7b; background:#10284b; }.cross-payment-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.cross-payment-grid article { padding:24px; border:1px solid #ffffff1d; border-radius:16px; background:#ffffff0a; }.cross-payment-grid span { color:#70a0f9; font-size:9px; font-weight:900; letter-spacing:1px; }.cross-payment-grid h3 { margin:16px 0 8px; font-size:19px; }.cross-payment-grid p { margin:0; color:#a5b4ca; font-size:12px; line-height:1.75; }.cross-note { margin:19px 0 0; color:#7f91ad; font-size:11px; line-height:1.7; }
.cross-process ol { padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; list-style:none; }.cross-process li { position:relative; }.cross-process li:not(:last-child):after { content:""; position:absolute; top:20px; left:50px; right:-20px; border-top:1px dashed #b9c9df; }.cross-process b { position:relative; z-index:1; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--cross); font-size:11px; }.cross-process h3 { margin:20px 0 8px; font-size:17px; }.cross-process p { margin:0; color:var(--muted); font-size:12px; line-height:1.75; }
.cross-faq { background:#f6f9fe; }.cross-faq .faq { max-width:900px; margin:auto; }.cross-cta { padding:72px 0; color:#fff; background:linear-gradient(110deg,#1548ae,#2468ed); }.cross-cta .wrap { display:flex; align-items:center; justify-content:space-between; gap:40px; }.cross-cta span { color:#b8d0fa; font-size:9px; font-weight:850; letter-spacing:1.5px; }.cross-cta h2 { margin:13px 0 9px; font-size:34px; }.cross-cta p { margin:0; color:#c9dcfa; }.cross-cta .btn { flex:none; color:var(--cross); background:#fff; }
@media(max-width:1000px) { .cross-hero-grid { grid-template-columns:1fr; padding:70px 0; }.cross-browser { width:min(100%,680px); transform:none; }.cross-capability-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.cross-mode-grid { grid-template-columns:1fr; }.cross-mode-grid p { min-height:0; }.cross-global-grid { grid-template-columns:1fr; gap:38px; }.cross-process ol { grid-template-columns:1fr; }.cross-process li { display:grid; grid-template-columns:42px minmax(0,1fr); gap:0 16px; }.cross-process li:not(:last-child):after { top:42px; bottom:-20px; left:20px; right:auto; border-top:0; border-left:1px dashed #b9c9df; }.cross-process h3 { margin:1px 0 6px; }.cross-process p { grid-column:2; } }
@media(max-width:620px) { .cross-hero-grid { min-height:0; padding:53px 0; gap:34px; }.cross-hero h1 { font-size:34px; letter-spacing:-1px; }.cross-hero .hero-subtitle { font-size:25px; }.cross-hero .hero-subtitle br { display:none; }.cross-hero .service-hero-copy>p { font-size:14px; line-height:1.8; }.cross-browser { border-radius:15px; }.cross-browser-nav span { display:none; }.cross-browser-main { min-height:250px; padding:22px; grid-template-columns:1fr 110px; }.cross-browser-main strong { font-size:20px; }.cross-product { min-height:170px; padding:13px; }.cross-product i { width:50px; height:50px; border-width:9px; border-radius:15px; }.cross-browser-foot b { display:none; }.cross-capability-grid { grid-template-columns:1fr; gap:11px; }.cross-capability-grid article { min-height:0; padding:21px; display:grid; grid-template-columns:44px minmax(0,1fr); gap:6px 13px; }.cross-capability-grid article>span { width:44px; height:44px; grid-row:1 / 3; }.cross-capability-grid h3 { margin:0; font-size:17px; }.cross-capability-grid p { grid-column:1 / -1; margin-top:7px; }.cross-mode-grid { gap:12px; }.cross-mode-grid article { padding:23px; }.cross-mode-grid h3 { margin:13px 0 9px; font-size:21px; }.cross-global h2 { font-size:29px; letter-spacing:-.8px; }.cross-global h2 br { display:none; }.cross-global-points article { padding:19px; }.cross-payment-grid { grid-template-columns:1fr 1fr; gap:9px; }.cross-payment-grid article { padding:17px; }.cross-payment-grid h3 { margin:11px 0 6px; font-size:16px; }.cross-process li { gap:0 13px; }.cross-cta { padding:52px 0; }.cross-cta .wrap { flex-direction:column; align-items:flex-start; }.cross-cta h2 { font-size:28px; line-height:1.25; }.cross-cta .btn { width:100%; } }
@media(max-width:390px) { .cross-browser { display:none; }.cross-payment-grid { grid-template-columns:1fr; } }
@media(max-width:1000px) {
  .cross-hero { padding:0; }
  .cross-hero-grid { min-height:0; padding:58px 0; }
}
@media(max-width:620px) {
  .cross-hero-grid { width:calc(100% - 28px); max-width:calc(100% - 28px); padding:36px 0; gap:24px; }
  .cross-hero .service-hero-copy,.cross-browser { width:100%; max-width:100%; min-width:0; }
  .cross-hero .hero-actions { display:grid; grid-template-columns:1fr; }
  .cross-hero .hero-subtitle { font-size:23px; line-height:1.35; }
  .cross-tags { margin-top:18px; gap:7px; }
  .cross-tags span { padding:6px 9px; font-size:10px; }
  .cross-browser-main { min-height:205px; padding:18px; grid-template-columns:minmax(0,1fr) 94px; gap:12px; }
  .cross-browser-main strong { font-size:18px; }
  .cross-product { min-width:0; min-height:145px; padding:11px; }
  .cross-browser-foot { padding:10px 12px; }
}