:root { --c-primary: #2563eb; --c-primary-dark: #1d4ed8; --c-primary-light: #eff6ff; --c-accent: #7c3aed; --c-text: #0f172a; --c-text-muted: #64748b; --c-text-light: #94a3b8; --c-border: #e5e7eb; --c-bg: #ffffff; --c-bg-alt: #f8fafc; --c-bg-dark: #0f172a; --c-success: #10b981; --container-w: 1480px; --radius: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 3px rgba(15,23,42,0.06); --shadow: 0 4px 12px rgba(15,23,42,0.08); --shadow-lg: 0 12px 32px rgba(15,23,42,0.10); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--c-text); background: var(--c-bg); line-height: 1.6; font-size: 15px; -webkit-font-smoothing: antialiased; } a { color: var(--c-primary); text-decoration: none; transition: color .2s; } a:hover { color: var(--c-primary-dark); } img { max-width: 100%; height: auto; display: block; } .container { max-width: var(--container-w); margin: 0 auto; padding: 0 20px; } .site-header { position: sticky; top: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); z-index: 100; } .header-bar { display: flex; align-items: center; height: 72px; gap: 32px; } .brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--c-text); } .brand:hover { color: var(--c-text); } .brand .logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; box-shadow: 0 4px 12px rgba(37,99,235,0.3); } .main-nav { flex: 1; display: flex; gap: 4px; align-items: center; } .main-nav a { color: var(--c-text-muted); padding: 8px 14px; border-radius: 6px; font-size: 14.5px; font-weight: 500; transition: all .2s; } .main-nav a:hover, .main-nav a.active { background: var(--c-primary-light); color: var(--c-primary); } .nav-item-has-sub { position: relative; display: inline-block; } .nav-item-has-sub > a { display: inline-flex; align-items: center; gap: 4px; } .nav-caret { font-size: 10px; transition: transform .2s; opacity: .7; } .nav-item-has-sub:hover .nav-caret { transform: rotate(180deg); } .nav-submenu { position: absolute; top: 100%; left: 0; min-width: 200px; background: #fff; border-radius: 10px; padding: 8px; box-shadow: 0 12px 32px rgba(11,31,58,.14); border: 1px solid #eef2f7; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s, transform .22s, visibility .22s; z-index: 200; } .nav-item-has-sub:hover .nav-submenu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-submenu::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } .nav-submenu a { display: block; padding: 10px 14px; font-size: 14px; color: #0b1f3a; border-radius: 6px; font-weight: 500; transition: background .18s, color .18s; } .nav-submenu a:hover { background: #fff4ec; color: #ff8c42; } .nav-dark .nav-submenu a, .nav-transparent .nav-submenu a { color: #0b1f3a !important; } @media (max-width: 980px) { .nav-submenu { display: none; } } .header-right { display: flex; align-items: center; gap: 12px; } .lang-switch { position: relative; } .lang-switch summary { list-style: none; cursor: pointer; padding: 6px 12px; border: 1px solid var(--c-border); border-radius: 6px; font-size: 13px; color: var(--c-text-muted); text-transform: uppercase; background: #fff; } .lang-switch summary::-webkit-details-marker { display: none; } .lang-switch summary:hover { background: var(--c-bg-alt); } .lang-dropdown { position: absolute; top: 100%; right: 0; margin-top: 6px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 140px; padding: 6px; } .lang-dropdown a { display: block; padding: 8px 12px; color: var(--c-text); font-size: 13px; border-radius: 4px; } .lang-dropdown a:hover { background: var(--c-bg-alt); } .btn-quote { background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); color: #fff; padding: 10px 22px; border-radius: 6px; font-size: 14px; font-weight: 600; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(37,99,235,0.25); transition: all .2s; } .btn-quote:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37,99,235,0.35); } .block-section { padding: 80px 0; } .block-section.no-pad-top { padding-top: 0; } .block-section.no-pad-bot { padding-bottom: 0; } .section-title { font-size: 36px; font-weight: 800; text-align: center; margin: 0 0 12px; color: var(--c-text); line-height: 1.2; } .section-subtitle { text-align: center; color: var(--c-text-muted); font-size: 16px; margin: 0 auto 50px; max-width: 700px; } .block-hero { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); background-color: #0f172a; color: #fff; padding: 0; position: relative; overflow: hidden; aspect-ratio: 1920 / 800; min-height: 240px; display: flex; align-items: center; justify-content: center; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; } .block-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 80% 50%, rgba(124,58,237,0.3), transparent 60%), radial-gradient(circle at 20% 80%, rgba(37,99,235,0.4), transparent 60%); } .hero-inner { position: relative; z-index: 2; text-align: center; max-width: 800px; margin: 0 auto; padding: 20px 24px; } .hero-title { font-size: 56px; font-weight: 900; margin: 0 0 20px; line-height: 1.1; letter-spacing: -1px; } .hero-subtitle { font-size: 20px; color: rgba(255,255,255,0.85); margin: 0 0 36px; line-height: 1.5; } .hero-cta { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--c-primary); padding: 16px 38px; border-radius: 8px; font-size: 16px; font-weight: 700; box-shadow: 0 8px 24px rgba(255,255,255,0.2); transition: all .2s; } .hero-cta:hover { color: var(--c-primary-dark); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,255,255,0.3); } .block-two-col { background: var(--c-bg-alt); } .two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .two-col-text h2 { font-size: 32px; margin: 0 0 16px; color: var(--c-text); } .two-col-text p { color: var(--c-text-muted); font-size: 16px; line-height: 1.7; margin: 0 0 16px; } .two-col-image img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .feature-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 36px 28px; text-align: center; transition: all .3s; } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } .feature-icon { width: 64px; height: 64px; margin: 0 auto 20px; background: linear-gradient(135deg, var(--c-primary-light), #f5f3ff); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 28px; } .feature-card h3 { font-size: 20px; margin: 0 0 12px; color: var(--c-text); } .feature-card p { color: var(--c-text-muted); margin: 0; line-height: 1.6; } .block-text-content { max-width: 100%; margin: 0 auto; color: var(--c-text); font-size: 16px; line-height: 1.7; } .block-cta { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 100%); color: #fff; padding: 80px 0; text-align: center; } .cta-title { font-size: 36px; font-weight: 800; margin: 0 0 14px; } .cta-subtitle { font-size: 18px; color: rgba(255,255,255,0.9); margin: 0 0 32px; } .cta-button { display: inline-block; background: #fff; color: var(--c-primary); padding: 16px 40px; border-radius: 8px; font-size: 16px; font-weight: 700; transition: all .2s; } .cta-button:hover { color: var(--c-primary-dark); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); } .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .product-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; transition: all .3s; text-decoration: none; color: inherit; display: flex; flex-direction: column; } .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; border-color: var(--c-primary-light); } .product-cover { aspect-ratio: 4 / 3; background: var(--c-bg-alt); overflow: hidden; } .product-cover img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s; } .product-card:hover .product-cover img { transform: scale(1.05); } .product-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; } .product-card h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; color: var(--c-text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card .summary { color: var(--c-text-muted); font-size: 13px; line-height: 1.5; flex: 1; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card .more { color: var(--c-primary); font-size: 13px; font-weight: 600; } .news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .news-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--c-border); transition: all .3s; } .news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: inherit; } .news-cover { aspect-ratio: 16 / 9; background: var(--c-bg-alt); overflow: hidden; } .news-cover img { width: 100%; height: 100%; object-fit: contain; } .news-card-body { padding: 18px; } .news-date { color: var(--c-text-light); font-size: 12px; margin-bottom: 6px; } .news-card h3 { font-size: 16px; margin: 0 0 8px; line-height: 1.4; color: var(--c-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-card .summary { color: var(--c-text-muted); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .inquiry-form { max-width: 720px; margin: 0 auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 40px; } .inquiry-form .form-row { margin-bottom: 18px; } .inquiry-form label { display: block; font-size: 13px; color: var(--c-text-muted); font-weight: 600; margin-bottom: 6px; } .inquiry-form input, .inquiry-form textarea { width: 100%; border: 1px solid var(--c-border); border-radius: 6px; padding: 12px 14px; font-size: 14px; font-family: inherit; transition: all .2s; } .inquiry-form input:focus, .inquiry-form textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); } .inquiry-form textarea { resize: vertical; min-height: 100px; } .inquiry-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .inquiry-submit { background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); color: #fff; padding: 14px 36px; border: none; border-radius: 6px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(37,99,235,0.25); transition: all .2s; width: 100%; } .inquiry-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,99,235,0.35); } .site-footer { background: var(--c-bg-dark); color: rgba(255,255,255,0.7); padding: 60px 0 30px; margin-top: 80px; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 40px; margin-bottom: 40px; } .footer-col h4 { color: #fff; font-size: 16px; margin: 0 0 18px; font-weight: 700; } .footer-col p, .footer-col li { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.6); } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 8px; } .footer-col a { color: rgba(255,255,255,0.7); transition: color .2s; } .footer-col a:hover { color: #fff; } .footer-contact-row { display: flex; gap: 8px; margin-bottom: 10px; font-size: 13.5px; } .footer-contact-row .ic { width: 18px; color: var(--c-primary); flex-shrink: 0; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; text-align: center; font-size: 12.5px; color: rgba(255,255,255,0.4); } #ai-chat-launcher { position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); box-shadow: 0 8px 24px rgba(37,99,235,0.4); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; z-index: 9998; transition: all .2s; } #ai-chat-launcher:hover { transform: scale(1.08); } @media (max-width: 960px) { .header-bar { gap: 16px; height: 60px; } .main-nav { display: none; } .hero-title { font-size: 36px; } .hero-subtitle { font-size: 16px; } .block-section { padding: 50px 0; } .section-title { font-size: 26px; } .two-col-grid { grid-template-columns: 1fr; gap: 30px; } .features-grid { grid-template-columns: 1fr; } .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .news-grid { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } .inquiry-form { padding: 24px; } .inquiry-form .grid2 { grid-template-columns: 1fr; } } .nav-center .header-bar { position: relative; justify-content: center; } .nav-center .brand { position: absolute; left: 50%; transform: translateX(-50%); order: 2; } .nav-center .main-nav { flex: none; order: 1; justify-content: flex-start; position: absolute; left: 0; } .nav-center .header-right { order: 3; position: absolute; right: 0; } @media (max-width: 900px){ .nav-center .brand { position: static; transform: none; } .nav-center .main-nav { position: static; } } .nav-dark.site-header { background: #0b1f3a; border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: none; } .nav-dark .brand { color: #fff; } .nav-dark .brand:hover { color: #fff; } .nav-dark .main-nav a { color: rgba(255,255,255,.78); } .nav-dark .main-nav a:hover, .nav-dark .main-nav a.active { background: rgba(255,255,255,.1); color: #fff; } .nav-dark .lang-switch summary { color: rgba(255,255,255,.85); } .nav-dark .btn-quote { background: var(--c-accent, #ff8c42); color: #fff; } .nav-transparent.site-header { background: transparent; border-bottom: 1px solid rgba(255,255,255,.15); backdrop-filter: none; transition: all .3s ease; } .nav-transparent .brand { color: #fff; } .nav-transparent .brand:hover { color: #fff; } .nav-transparent .main-nav a { color: rgba(255,255,255,.85); } .nav-transparent .main-nav a:hover, .nav-transparent .main-nav a.active { background: rgba(255,255,255,.15); color: #fff; } .nav-transparent .lang-switch summary { color: #fff; } .nav-transparent .btn-quote { background: #fff; color: #0b1f3a; } .nav-transparent.nav-scrolled { background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); } .nav-transparent.nav-scrolled .brand { color: var(--c-text); } .nav-transparent.nav-scrolled .main-nav a { color: var(--c-text-muted); } .nav-transparent.nav-scrolled .main-nav a:hover, .nav-transparent.nav-scrolled .main-nav a.active { background: var(--c-primary-light); color: var(--c-primary); } .nav-transparent.nav-scrolled .lang-switch summary { color: var(--c-text); } .nav-transparent.nav-scrolled .btn-quote { background: var(--c-primary); color: #fff; } .nav-minimal.site-header { background: #fff; border-bottom: 1px solid #f0f0f0; backdrop-filter: none; } .nav-minimal .header-bar { height: 84px; gap: 48px; } .nav-minimal .brand { font-weight: 700; letter-spacing: .5px; } .nav-minimal .brand .logo-icon { background: #0b1f3a; box-shadow: none; } .nav-minimal .main-nav { gap: 12px; justify-content: center; } .nav-minimal .main-nav a { color: #1a1a1a; font-size: 14px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; border-radius: 0; padding: 6px 4px; border-bottom: 2px solid transparent; } .nav-minimal .main-nav a:hover, .nav-minimal .main-nav a.active { background: transparent; color: #0b1f3a; border-bottom-color: #0b1f3a; } .nav-minimal .btn-quote { background: transparent; color: #0b1f3a; border: 1px solid #0b1f3a; border-radius: 0; text-transform: uppercase; letter-spacing: .8px; font-size: 13px; } .nav-minimal .btn-quote:hover { background: #0b1f3a; color: #fff; } .site-header { background:#fff; backdrop-filter:none; border-bottom:1px solid #ececec; } .header-bar { height:80px; gap:40px; } .brand { font-size:21px; font-weight:700; letter-spacing:-.3px; color:#111; gap:11px; } .brand:hover { color:#111; } .brand .logo-icon { width:38px; height:38px; border-radius:9px; background:#111; box-shadow:none; font-size:18px; } .main-nav { flex:1; gap:6px; } .main-nav a { position:relative; color:#444; padding:8px 16px; border-radius:0; font-size:15px; font-weight:500; letter-spacing:.1px; background:transparent; } .main-nav a::after { content:''; position:absolute; left:16px; right:16px; bottom:2px; height:2px; background:var(--c-primary,#111); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } .main-nav a:hover, .main-nav a.active { background:transparent; color:#111; } .main-nav a:hover::after, .main-nav a.active::after { transform:scaleX(1); } .lang-switch summary { padding:7px 13px; border:1px solid #e2e2e2; border-radius:7px; font-size:13px; color:#555; background:#fff; font-weight:500; } .lang-switch summary:hover { background:#fafafa; border-color:#d0d0d0; } .btn-quote { background:var(--c-primary,#111); color:#fff; padding:11px 24px; border-radius:8px; font-size:14px; font-weight:600; letter-spacing:.2px; border:none; box-shadow:none; transition:all .2s ease; } .btn-quote:hover { background:var(--c-primary-dark,#000); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.2); } .nav-center .brand .logo-icon { background:#111; } .nav-dark.site-header { background:#0f1115; border-bottom:1px solid rgba(255,255,255,.07); } .nav-dark .brand { color:#fff; } .nav-dark .brand:hover { color:#fff; } .nav-dark .brand .logo-icon { background:#fff; color:#0f1115; } .nav-dark .main-nav a { color:rgba(255,255,255,.72); } .nav-dark .main-nav a:hover, .nav-dark .main-nav a.active { color:#fff; background:transparent; } .nav-dark .main-nav a::after { background:#fff; } .nav-dark .lang-switch summary { background:transparent; border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.85); } .nav-dark .lang-switch summary:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.35); } .nav-dark .lang-dropdown { background:#1a1d23; border-color:rgba(255,255,255,.1); } .nav-dark .lang-dropdown a { color:rgba(255,255,255,.8); } .nav-dark .lang-dropdown a:hover { background:rgba(255,255,255,.08); } .nav-dark .btn-quote { background:#fff; color:#0f1115; } .nav-dark .btn-quote:hover { background:#f0f0f0; box-shadow:0 6px 18px rgba(0,0,0,.3); } .nav-transparent.site-header { background:transparent; border-bottom:1px solid rgba(255,255,255,.18); backdrop-filter:none; transition:all .35s ease; } .nav-transparent .brand { color:#fff; } .nav-transparent .brand:hover { color:#fff; } .nav-transparent .brand .logo-icon { background:rgba(255,255,255,.15); color:#fff; backdrop-filter:blur(4px); } .nav-transparent .main-nav a { color:rgba(255,255,255,.85); } .nav-transparent .main-nav a:hover, .nav-transparent .main-nav a.active { color:#fff; background:transparent; } .nav-transparent .main-nav a::after { background:#fff; } .nav-transparent .lang-switch summary { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:#fff; backdrop-filter:blur(4px); } .nav-transparent .lang-switch summary:hover { background:rgba(255,255,255,.18); } .nav-transparent .btn-quote { background:#fff; color:#111; } .nav-transparent .btn-quote:hover { background:#f0f0f0; } .nav-transparent.nav-scrolled { background:rgba(255,255,255,.98); backdrop-filter:blur(10px); border-bottom:1px solid #ececec; } .nav-transparent.nav-scrolled .brand { color:#111; } .nav-transparent.nav-scrolled .brand .logo-icon { background:#111; color:#fff; } .nav-transparent.nav-scrolled .main-nav a { color:#444; } .nav-transparent.nav-scrolled .main-nav a:hover, .nav-transparent.nav-scrolled .main-nav a.active { color:#111; } .nav-transparent.nav-scrolled .main-nav a::after { background:#111; } .nav-transparent.nav-scrolled .lang-switch summary { background:#fff; border-color:#e2e2e2; color:#555; } .nav-transparent.nav-scrolled .btn-quote { background:#111; color:#fff; } .nav-minimal.site-header { background:#fff; border-bottom:1px solid #f2f2f2; backdrop-filter:none; } .nav-minimal .header-bar { height:88px; gap:56px; } .nav-minimal .brand { font-weight:600; letter-spacing:1px; text-transform:uppercase; font-size:18px; } .nav-minimal .brand .logo-icon { background:#111; box-shadow:none; } .nav-minimal .main-nav { gap:0; justify-content:center; } .nav-minimal .main-nav a { color:#222; font-size:13px; font-weight:500; letter-spacing:1.2px; text-transform:uppercase; padding:8px 18px; border-radius:0; } .nav-minimal .main-nav a::after { left:18px; right:18px; background:#111; } .nav-minimal .lang-switch summary { border:none; background:transparent; letter-spacing:1px; } .nav-minimal .btn-quote { background:transparent; color:#111; border:1.5px solid #111; border-radius:0; text-transform:uppercase; letter-spacing:1px; font-size:12.5px; font-weight:600; padding:11px 24px; } .nav-minimal .btn-quote:hover { background:#111; color:#fff; transform:none; box-shadow:none; } .pd-content img, .article-content img, .rich-content img { max-width: 100%; height: auto; display: block; margin: 22px auto; border-radius: 12px; } .rc-video-wrap { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; margin: 24px 0; background: #000; } .rc-video-wrap iframe, .rc-video-wrap video, .rc-video-wrap embed, .rc-video-wrap object { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .pd-content video, .article-content video, .rich-content video { max-width: 100%; height: auto; display: block; margin: 24px auto; border-radius: 12px; } .rc-table-wrap { margin: 26px 0; } .pd-content table, .article-content table, .rich-content table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.6; background: #fff; border: 1px solid #e6e9f0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.04); } .pd-content table th, .article-content table th, .rich-content table th { background: #1e293b; color: #fff; font-weight: 600; text-align: left; padding: 14px 18px; font-size: 14px; letter-spacing: .2px; border: none; border-right: 1px solid rgba(255,255,255,.08); white-space: nowrap; } .pd-content table td, .article-content table td, .rich-content table td { padding: 13px 18px; border-top: 1px solid #eef1f6; color: #334155; vertical-align: top; } .pd-content table tbody tr:nth-child(even), .article-content table tbody tr:nth-child(even), .rich-content table tbody tr:nth-child(even) { background: #f8fafc; } .pd-content table tbody tr:hover, .article-content table tbody tr:hover, .rich-content table tbody tr:hover { background: #f1f5f9; } @media (max-width: 768px) { .pd-content table, .article-content table, .rich-content table, .pd-content table thead, .article-content table thead, .rich-content table thead, .pd-content table tbody, .article-content table tbody, .rich-content table tbody, .pd-content table tr, .article-content table tr, .rich-content table tr, .pd-content table td, .article-content table td, .rich-content table td { display: block; width: 100%; box-sizing: border-box; } .pd-content table thead, .article-content table thead, .rich-content table thead { position: absolute; left: -9999px; top: -9999px; } .pd-content table, .article-content table, .rich-content table { border: none; box-shadow: none; background: transparent; } .pd-content table tr, .article-content table tr, .rich-content table tr { margin-bottom: 16px; border: 1px solid #e6e9f0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.05); } .pd-content table tbody tr:nth-child(even), .article-content table tbody tr:nth-child(even), .rich-content table tbody tr:nth-child(even) { background: #fff; } .pd-content table td, .article-content table td, .rich-content table td { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 12px 16px; border-top: 1px solid #f1f5f9; text-align: right; } .pd-content table tr td:first-child, .article-content table tr td:first-child, .rich-content table tr td:first-child { border-top: none; } .pd-content table td::before, .article-content table td::before, .rich-content table td::before { content: attr(data-label); font-weight: 600; color: #0f1f3d; text-align: left; flex-shrink: 0; max-width: 45%; } .pd-content table td:empty::before, .article-content table td:empty::before, .rich-content table td:empty::before { content: attr(data-label); } } .rc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 26px 0; border-radius: 12px; } .rc-table-scroll table { margin: 0 !important; min-width: 100%; } @media (max-width: 768px) { .pd-content table.rc-no-head, .article-content table.rc-no-head, .rich-content table.rc-no-head, .two-col-text-content table.rc-no-head, .block-text-content table.rc-no-head, .block-render-wrap table.rc-no-head { display: table !important; width: auto !important; min-width: 100%; border: 1px solid var(--c-border, #e6e9f0) !important; box-shadow: none !important; background: #fff !important; } .pd-content table.rc-no-head tr, .article-content table.rc-no-head tr, .rich-content table.rc-no-head tr, .two-col-text-content table.rc-no-head tr, .block-text-content table.rc-no-head tr, .block-render-wrap table.rc-no-head tr { display: table-row !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .pd-content table.rc-no-head td, .article-content table.rc-no-head td, .rich-content table.rc-no-head td, .two-col-text-content table.rc-no-head td, .block-text-content table.rc-no-head td, .block-render-wrap table.rc-no-head td { display: table-cell !important; width: auto !important; text-align: left !important; white-space: nowrap; padding: 12px 16px !important; border-top: 1px solid var(--c-border, #eef1f6) !important; } .pd-content table.rc-no-head td::before, .article-content table.rc-no-head td::before, .rich-content table.rc-no-head td::before, .two-col-text-content table.rc-no-head td::before, .block-text-content table.rc-no-head td::before, .block-render-wrap table.rc-no-head td::before { content: none !important; } } .rc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 26px 0; border-radius: 12px; } .rc-table-scroll table { margin: 0 !important; min-width: 100%; } @media (max-width: 768px) { .pd-content table.rc-no-head, .article-content table.rc-no-head, .rich-content table.rc-no-head, .two-col-text-content table.rc-no-head, .block-text-content table.rc-no-head, .block-render-wrap table.rc-no-head { display: table !important; width: auto !important; min-width: 100%; border: 1px solid var(--c-border, #e6e9f0) !important; box-shadow: none !important; background: #fff !important; } .pd-content table.rc-no-head tr, .article-content table.rc-no-head tr, .rich-content table.rc-no-head tr, .two-col-text-content table.rc-no-head tr, .block-text-content table.rc-no-head tr, .block-render-wrap table.rc-no-head tr { display: table-row !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .pd-content table.rc-no-head td, .article-content table.rc-no-head td, .rich-content table.rc-no-head td, .two-col-text-content table.rc-no-head td, .block-text-content table.rc-no-head td, .block-render-wrap table.rc-no-head td { display: table-cell !important; width: auto !important; text-align: left !important; white-space: nowrap; padding: 12px 16px !important; border-top: 1px solid var(--c-border, #eef1f6) !important; } .pd-content table.rc-no-head td::before, .article-content table.rc-no-head td::before, .rich-content table.rc-no-head td::before, .two-col-text-content table.rc-no-head td::before, .block-text-content table.rc-no-head td::before, .block-render-wrap table.rc-no-head td::before { content: none !important; } } .brand { display: flex; align-items: center; } .brand .brand-logo { height: 44px; width: auto; max-width: 200px; object-fit: contain; display: block; } .nav-dark .brand .brand-logo, .nav-transparent .brand .brand-logo { filter: brightness(1.05); } .brand .brand-logo-mobile { display: none; } @media (max-width: 768px) { .brand .brand-logo { height: 34px; max-width: 150px; } .brand .brand-logo-pc { display: none; } .brand .brand-logo-mobile { display: block; } } .page-banner{position:relative;width:100%;aspect-ratio:1920/480;display:flex;align-items:center;justify-content:center;background:center/100% 100% no-repeat;overflow:hidden} .page-banner-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.55) 100%);z-index:1} .page-banner-grad{background:var(--c-section-dark,linear-gradient(135deg,#0f172a 0%,#1e293b 100%))} .page-banner-grad::before{content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 70%);pointer-events:none} .page-banner-grad::after{content:"";position:absolute;bottom:-80px;left:8%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.04),transparent 70%);pointer-events:none} .page-banner-body{position:relative;z-index:2;text-align:center;max-width:900px;padding:0 24px} .page-banner-body h1{font-size:clamp(28px,5vw,48px);font-weight:800;color:#fff;margin:0;line-height:1.25;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.15)} .page-banner-body h1::after{content:"";display:block;width:56px;height:4px;background:linear-gradient(90deg,var(--c-primary,#3b82f6),rgba(255,255,255,.45));margin:18px auto 0;border-radius:2px} .page-banner-sub{font-size:clamp(15px,1.8vw,19px);color:rgba(255,255,255,.82);margin:14px auto 0;line-height:1.65;max-width:680px} @media(max-width:768px){.page-banner-body h1::after{margin-top:14px}} @media(max-width:480px){.page-banner-body h1::after{width:40px;height:3px}} html[dir="rtl"] { direction: rtl; } html[dir="rtl"] body { text-align: right; } html[dir="rtl"] .block-text-content, html[dir="rtl"] .pd-content, html[dir="rtl"] .article-content, html[dir="rtl"] .rich-content, html[dir="rtl"] .pd-content p, html[dir="rtl"] .article-content p, html[dir="rtl"] .rich-content p { text-align: right; } html[dir="rtl"] .pd-content ul, html[dir="rtl"] .pd-content ol, html[dir="rtl"] .article-content ul, html[dir="rtl"] .article-content ol, html[dir="rtl"] .rich-content ul, html[dir="rtl"] .rich-content ol { padding-right: 1.6em; padding-left: 0; } html[dir="rtl"] [style*="text-align:left"], html[dir="rtl"] [style*="text-align: left"] { text-align: right !important; } html[dir="rtl"] .pd-content table th, html[dir="rtl"] .article-content table th, html[dir="rtl"] .rich-content table th { text-align: right; border-right: none; border-left: 1px solid rgba(255,255,255,.08); } html[dir="rtl"] .pd-content table td, html[dir="rtl"] .article-content table td, html[dir="rtl"] .rich-content table td { text-align: right; } html[dir="rtl"] .pd-content table td::before, html[dir="rtl"] .article-content table td::before, html[dir="rtl"] .rich-content table td::before { text-align: right; } html[dir="rtl"] .nav-submenu { left: auto; right: 0; } html[dir="rtl"] .nav-submenu::before { left: auto; right: 0; } html[dir="rtl"] .nav-center .main-nav { left: auto; right: 0; } html[dir="rtl"] .nav-center .header-right { right: auto; left: 0; } html[dir="rtl"] #ai-chat-launcher { right: auto; left: 24px; }
.ps{container-type:inline-size;container-name:ps;--ps-gap:24px;--ps-r:var(--radius-lg,12px);margin:0} .ps-g{display:grid;gap:var(--ps-gap);grid-template-columns:repeat(4,minmax(0,1fr))} .ps-c3 .ps-g{grid-template-columns:repeat(3,minmax(0,1fr))} .ps-c2 .ps-g{grid-template-columns:repeat(2,minmax(0,1fr))} @container ps (max-width:1060px){.ps-c4 .ps-g{grid-template-columns:repeat(3,minmax(0,1fr))}} @container ps (max-width:780px){.ps-c4 .ps-g,.ps-c3 .ps-g{grid-template-columns:repeat(2,minmax(0,1fr))}} @container ps (max-width:440px){.ps-n .ps-g,.ps-p-row .ps-g{grid-template-columns:minmax(0,1fr)!important}} @container ps (max-width:440px){.ps{--ps-gap:14px}} .ps-card{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff; border:1px solid var(--c-border,#e5e7eb);border-radius:var(--ps-r);overflow:hidden; transition:box-shadow .25s,transform .25s,border-color .25s} .ps-card:hover{box-shadow:0 14px 32px rgba(15,23,42,.10);transform:translateY(-3px)} .ps-img{display:block;position:relative;aspect-ratio:var(--ps-ratio,1 / 1);overflow:hidden; background:var(--c-bg-alt,#f8fafc)} .ps-img img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .45s} .ps-n .ps-img img{object-fit:cover} .ps-card:hover .ps-img img{transform:scale(1.05)} .ps-noimg{position:absolute;inset:0;background:linear-gradient(135deg,var(--c-bg-alt,#f1f5f9),#e2e8f0)} .ps-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1;min-width:0} .ps-date{font-size:12.5px;color:var(--c-text-muted,#64748b)} .ps-t{margin:0;font-size:16px;font-weight:700;line-height:1.4;color:var(--c-text,#0f172a); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ps-t a{color:inherit;text-decoration:none} .ps-t a::after{content:"";position:absolute;inset:0;z-index:1} .ps-card:hover .ps-t{color:var(--c-primary,#2563eb)} .ps-d{margin:0;font-size:13.5px;line-height:1.6;color:var(--c-text-muted,#64748b); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ps-nodesc .ps-d{display:none} .ps-acts{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between; gap:10px;flex-wrap:wrap} .ps-more{font-size:13.5px;font-weight:600;color:var(--c-primary,#2563eb);display:inline-flex;gap:5px;align-items:center} .ps-more i{font-style:normal;transition:transform .2s} .ps-card:hover .ps-more i{transform:translateX(3px)} .ps-q{position:relative;z-index:2;border:1px solid var(--c-primary,#2563eb);background:var(--c-primary,#2563eb); color:#fff;font:inherit;font-size:13px;font-weight:600;line-height:1;padding:9px 14px;border-radius:8px;cursor:pointer; transition:filter .2s,box-shadow .2s} .ps-q:hover{filter:brightness(.93);box-shadow:0 6px 14px rgba(15,23,42,.18)} .ps-p-classic .ps-t{font-size:15.5px} .ps-p-classic .ps-q{background:#fff;color:var(--c-primary,#2563eb)} .ps-p-classic .ps-q:hover{background:var(--c-primary,#2563eb);color:#fff;filter:none} .ps-p-overlay .ps-card,.ps-n-overlay .ps-card{border:0;background:#0f172a} .ps-p-overlay .ps-img,.ps-n-overlay .ps-img{aspect-ratio:var(--ps-ratio,1 / 1)} .ps-p-overlay .ps-img img{object-fit:cover} .ps-p-overlay .ps-body,.ps-n-overlay .ps-body{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 18px; background:linear-gradient(to top,rgba(10,15,30,.88),rgba(10,15,30,.55) 55%,transparent);gap:6px} .ps-p-overlay .ps-t,.ps-n-overlay .ps-t,.ps-p-overlay .ps-card:hover .ps-t,.ps-n-overlay .ps-card:hover .ps-t{color:#fff} .ps-p-overlay .ps-d,.ps-n-overlay .ps-d{color:rgba(255,255,255,.82);-webkit-line-clamp:1} .ps-p-overlay .ps-more,.ps-n-overlay .ps-more,.ps-n-overlay .ps-date{color:rgba(255,255,255,.9)} .ps-p-overlay .ps-q{background:#fff;color:var(--c-primary,#2563eb);border-color:#fff} .ps-p-overlay .ps-noimg,.ps-n-overlay .ps-noimg{background:linear-gradient(135deg,#1e293b,#475569)} .ps-p-row .ps-g{grid-template-columns:repeat(2,minmax(0,1fr))!important} .ps-p-row.ps-c2 .ps-g{grid-template-columns:minmax(0,1fr)!important} @container ps (max-width:900px){.ps-p-row .ps-g{grid-template-columns:minmax(0,1fr)!important}} .ps-p-row .ps-card{flex-direction:row;align-items:stretch} .ps-p-row .ps-img{flex:0 0 38%;max-width:240px;aspect-ratio:var(--ps-ratio,1 / 1);align-self:center} .ps-p-row .ps-body{justify-content:center;padding:18px 20px} .ps-p-row .ps-t{font-size:16.5px} @container ps (max-width:440px){.ps-p-row .ps-img{flex-basis:36%}.ps-p-row .ps-body{padding:12px 14px}} .ps-p-minimal .ps-card{border:0;background:transparent;overflow:visible} .ps-p-minimal .ps-card:hover{box-shadow:none;transform:none} .ps-p-minimal .ps-img{border-radius:var(--ps-r);background:var(--c-bg-alt,#f3f4f6)} .ps-p-minimal .ps-body{padding:14px 2px 0;align-items:center;text-align:center;gap:6px} .ps-p-minimal .ps-t{font-size:15px;font-weight:600} .ps-p-minimal .ps-acts{justify-content:center} .ps-p-minimal .ps-more{display:none} .ps-p-minimal .ps-q{background:transparent;color:var(--c-text,#0f172a);border-color:var(--c-border,#d1d5db)} .ps-p-minimal .ps-q:hover{border-color:var(--c-primary,#2563eb);color:var(--c-primary,#2563eb);filter:none} .ps-p-framed .ps-card{padding:12px;border-width:1px;box-shadow:0 1px 3px rgba(15,23,42,.05)} .ps-p-framed .ps-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px; background:var(--c-primary,#2563eb);transform:scaleX(0);transition:transform .3s} .ps-p-framed .ps-card:hover::after{transform:scaleX(1)} .ps-p-framed .ps-img{border-radius:calc(var(--ps-r) - 4px);border:1px solid var(--c-border,#eef0f3)} .ps-p-framed .ps-body{padding:14px 6px 6px;align-items:center;text-align:center} .ps-p-framed .ps-acts{justify-content:center} .ps-n-grid .ps-body{padding:16px 18px 20px} .ps-n-list .ps-g{grid-template-columns:minmax(0,1fr)!important} .ps-n-list .ps-card{flex-direction:row} .ps-n-list .ps-img{flex:0 0 32%;max-width:320px;aspect-ratio:var(--ps-ratio,16 / 9)} .ps-n-list .ps-body{justify-content:center;padding:18px 22px} .ps-n-list .ps-t{font-size:18px} .ps-n-list .ps-acts,.ps-p-row .ps-acts{margin-top:4px} @container ps (max-width:560px){.ps-n-list .ps-card{flex-direction:column}.ps-n-list .ps-img{flex:none;max-width:none}} .ps-n-feature .ps-big{grid-column:1 / -1;flex-direction:row} .ps-n-feature .ps-big .ps-img{flex:0 0 56%;aspect-ratio:16 / 9} .ps-n-feature .ps-big .ps-body{justify-content:center;padding:26px 30px;gap:12px} .ps-n-feature .ps-big .ps-t{font-size:24px;-webkit-line-clamp:3} .ps-n-feature .ps-big .ps-d{-webkit-line-clamp:4;font-size:14.5px} .ps-n-feature .ps-big .ps-acts{margin-top:6px} @container ps (max-width:760px){.ps-n-feature .ps-big{flex-direction:column}.ps-n-feature .ps-big .ps-img{flex:none} .ps-n-feature .ps-big .ps-body{padding:18px}.ps-n-feature .ps-big .ps-t{font-size:20px}} .ps-n-text .ps-g{gap:0 40px} .ps-n-text.ps-c4 .ps-g,.ps-n-text.ps-c3 .ps-g{grid-template-columns:repeat(2,minmax(0,1fr))} .ps-n-text.ps-c2 .ps-g{grid-template-columns:minmax(0,1fr)} @container ps (max-width:760px){.ps-n-text .ps-g{grid-template-columns:minmax(0,1fr)!important}} .ps-n-text .ps-card{border:0;border-bottom:1px solid var(--c-border,#e5e7eb);border-radius:0;background:transparent} .ps-n-text .ps-card:hover{box-shadow:none;transform:none} .ps-n-text .ps-body{padding:18px 0 20px;padding-inline-start:16px;border-inline-start:3px solid transparent;transition:border-color .2s} .ps-n-text .ps-card:hover .ps-body{border-inline-start-color:var(--c-primary,#2563eb)} .ps-n-text .ps-t{font-size:17px} .ps-n-overlay .ps-body{padding-top:60px} .ps-n-overlay .ps-t{font-size:17px} [dir="rtl"] .ps-more i{transform:scaleX(-1)} [dir="rtl"] .ps-card:hover .ps-more i{transform:scaleX(-1) translateX(3px)} .product-detail.ps-d-gallery{grid-template-columns:minmax(0,1fr);gap:30px} .ps-d-gallery .pd-main-img{aspect-ratio:16 / 9;max-height:640px;width:100%} .ps-d-gallery .pd-thumbs{justify-content:center} .ps-d-gallery .pd-info{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:48px;align-items:start} .ps-d-gallery .pd-info > *{grid-column:1} .ps-d-gallery .pd-info > .specs-body-naked{grid-column:2;grid-row:1 / span 6;margin-bottom:0} .ps-d-gallery .pd-info:not(:has(.specs-body-naked)){display:block} .product-detail.ps-d-specs{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:44px;align-items:start} .ps-d-specs .pd-info{order:-1} .ps-d-specs .pd-gallery{position:sticky;top:96px} .ps-d-specs .pd-info h1{font-size:30px} .ps-d-specs .specs-body-naked{border:1px solid var(--c-border,#e5e7eb);border-radius:12px;overflow:hidden} .ps-d-specs .specs-body-naked table{margin:0} .ps-d-specs .specs-body-naked thead th{background:var(--c-primary,#2563eb);color:#fff} @media (max-width:900px){ .product-detail.ps-d-gallery,.product-detail.ps-d-specs{grid-template-columns:minmax(0,1fr)} .ps-d-gallery .pd-info{display:block} .ps-d-gallery .pd-main-img{aspect-ratio:1 / 1} .ps-d-specs .pd-info{order:0} .ps-d-specs .pd-gallery{position:static} } .ps-p-classic .ps-t,.ps-p-overlay .ps-t{text-align:center} .plb-why{position:relative;overflow:hidden;padding:84px 0;border-top:1px solid var(--c-border,#eef2f7); background:linear-gradient(180deg,#f8fafc,#fff)} .plb-why::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;top:-260px;left:-160px; background:radial-gradient(circle,rgba(37,99,235,.08),transparent 70%); background:radial-gradient(circle,color-mix(in srgb,var(--c-primary,#2563eb) 10%,transparent),transparent 70%); pointer-events:none} .plb-why .container{position:relative} .plb-why-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center} .plb-why-tx h2{position:relative;margin:0 0 20px;padding-top:26px;font-size:36px;line-height:1.18;font-weight:800; letter-spacing:-.6px;color:var(--c-text,#0f172a)} .plb-why-tx h2::before{content:"";position:absolute;top:0;inset-inline-start:0;width:56px;height:5px;border-radius:3px; background:var(--c-primary,#2563eb)} .plb-why-tx p{margin:0;font-size:16.5px;line-height:1.9;color:var(--c-text-muted,#475569)} .plb-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .plb-feat{display:flex;align-items:center;gap:16px;padding:24px 22px;background:#fff; border:1px solid var(--c-border,#e5e7eb);border-radius:16px;box-shadow:0 1px 3px rgba(15,23,42,.04); transition:transform .25s,box-shadow .25s,border-color .25s} .plb-feat:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.10);border-color:transparent} .plb-ic{flex:0 0 52px;width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center; color:var(--c-primary,#2563eb);background:#eef2ff;background:color-mix(in srgb,var(--c-primary,#2563eb) 10%,#fff)} .plb-ic svg{width:26px;height:26px} .plb-feat b{font-size:15.5px;font-weight:700;line-height:1.4;color:var(--c-text,#0f172a)} .plb-cta{padding:12px 0 80px;background:#fff} .plb-cta-box{position:relative;overflow:hidden;display:flex;align-items:center;gap:28px;padding:50px 56px; border-radius:24px;color:#fff;background:var(--c-primary,#2563eb); background:linear-gradient(120deg,var(--c-primary,#2563eb),color-mix(in srgb,var(--c-primary,#2563eb) 55%,#0b1020)); box-shadow:0 26px 60px rgba(37,99,235,.25); box-shadow:0 26px 60px color-mix(in srgb,var(--c-primary,#2563eb) 28%,transparent)} .plb-cta-box::before{content:"";position:absolute;width:400px;height:400px;border-radius:50%;top:-200px; inset-inline-end:-90px;background:rgba(255,255,255,.08);pointer-events:none} .plb-cta-box::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;bottom:-150px; inset-inline-end:230px;background:rgba(255,255,255,.06);pointer-events:none} .plb-cta-ic{position:relative;flex:0 0 72px;width:72px;height:72px;border-radius:20px;background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;color:#fff} .plb-cta-ic svg{width:34px;height:34px} .plb-cta-tx{position:relative;flex:1;min-width:0} .plb-cta-tx h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-.4px;line-height:1.25;color:#fff} .plb-cta-tx p{margin:10px 0 0;font-size:16px;opacity:.9;line-height:1.6;color:#fff} .plb-cta-btn{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;background:#fff; color:var(--c-primary,#2563eb);padding:17px 34px;border-radius:14px;font-size:16px;font-weight:700; text-decoration:none;white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.18);transition:transform .2s,box-shadow .2s} .plb-cta-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.25)} .plb-cta-btn span{display:inline-block;transition:transform .2s} .plb-cta-btn:hover span{transform:translateX(4px)} [dir="rtl"] .plb-cta-btn span{transform:scaleX(-1)} [dir="rtl"] .plb-cta-btn:hover span{transform:scaleX(-1) translateX(4px)} @media (max-width:960px){ .plb-why{padding:56px 0} .plb-why-in{grid-template-columns:minmax(0,1fr);gap:32px} .plb-why-tx h2{font-size:28px} } @media (max-width:768px){ .plb-cta{padding-bottom:56px} .plb-cta-box{flex-direction:column;text-align:center;padding:38px 24px;gap:18px} .plb-cta-tx h2{font-size:22px} .plb-cta-tx p{font-size:14.5px} } @media (max-width:520px){ .plb-feats{gap:12px} .plb-feat{flex-direction:column;align-items:flex-start;padding:18px 16px;gap:12px} .plb-feat b{font-size:14px} } .plb-why{background:#fff;border-top:0;padding:24px 0 56px} .plb-why::before{display:none} .plb-why-in{gap:48px;padding-top:48px;border-top:1px solid var(--c-border,#e5e7eb)} .plb-why-tx h2{font-size:28px;padding-top:18px;margin-bottom:14px;letter-spacing:-.3px} .plb-why-tx h2::before{width:40px;height:4px} .plb-why-tx p{font-size:15px;line-height:1.85} .plb-feats{gap:16px} .plb-feat{padding:20px;border-radius:var(--radius-lg,12px);box-shadow:none} .plb-feat:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(15,23,42,.10); border-color:var(--c-border,#e5e7eb)} .plb-ic{flex-basis:44px;width:44px;height:44px;border-radius:10px} .plb-ic svg{width:22px;height:22px} .plb-feat b{font-size:15px;font-weight:600} .plb-cta{padding:0 0 72px} .plb-cta-box{padding:30px 36px;border-radius:var(--radius-lg,12px);color:var(--c-text,#0f172a); background:#f5f7ff;background:color-mix(in srgb,var(--c-primary,#2563eb) 5%,#fff); border:1px solid #dbe3ff;border:1px solid color-mix(in srgb,var(--c-primary,#2563eb) 16%,#fff); box-shadow:none} .plb-cta-box::before,.plb-cta-box::after{display:none} .plb-cta-ic{flex-basis:56px;width:56px;height:56px;border-radius:12px; background:var(--c-primary,#2563eb);border:0;color:#fff} .plb-cta-ic svg{width:26px;height:26px} .plb-cta-tx h2{font-size:22px;color:var(--c-text,#0f172a);letter-spacing:-.2px} .plb-cta-tx p{font-size:15px;opacity:1;color:var(--c-text-muted,#475569);margin-top:6px} .plb-cta-btn{background:var(--c-primary,#2563eb);color:#fff;padding:14px 28px;border-radius:10px; font-size:15px;box-shadow:none} .plb-cta-btn:hover{box-shadow:0 10px 22px rgba(15,23,42,.18);filter:brightness(.95)} @media (max-width:960px){.plb-why-in{padding-top:36px}} @media (max-width:768px){.plb-cta-box{padding:28px 20px}.plb-cta-tx h2{font-size:20px}}