:root {
    --primary-color: #4F46E5;
    --primary-hover: #4338CA;
    --primary-soft: #EEF2FF;
    --primary-glow: rgba(79, 70, 229, 0.24);
    --dark-brand: #111827;
    --dark-brand-soft: #171A2E;
    --text-color: #1F2937;
    --text-light: #6B7280;
    --bg-color: #FFFFFF;
    --bg-secondary: #F9FAFB;
    --border-color: #E5E7EB;
    --white: #FFFFFF;
    --max-width: 1200px;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--bg-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

ul {
    list-style: none;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}

.btn-outline {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.hero-cta { display:flex; flex-wrap:wrap; gap:12px; }
.live-order-entry { padding:72px 0; background:var(--bg-secondary); }
.live-order-entry-card { display:flex; align-items:center; justify-content:space-between; gap:44px; padding:40px 44px; background:linear-gradient(145deg,#17192E,#1D1E38); border:1px solid #343765; border-radius:18px; color:#fff; box-shadow:0 22px 48px rgba(17,24,39,.18); }
.live-order-entry-card > div { max-width:780px; }
.live-order-entry-card h2 { margin:8px 0 12px; font-size:clamp(1.8rem,4vw,2.5rem); }
.live-order-entry-card p { color:#c7c9df; }
.live-order-points { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:20px; color:#e0e7ff; }
.live-order-points li::before { content:'✓'; margin-right:8px; color:#34d399; }

.solution-page { background:var(--bg-secondary); }
.solution-hero { padding:86px 0 72px; color:#fff; background:linear-gradient(135deg,var(--dark-brand),#232453 58%,var(--dark-brand)); }
.solution-hero .container { max-width:920px; text-align:center; }
.solution-hero h1 { margin:10px 0 18px; font-size:clamp(2.25rem,6vw,4rem); line-height:1.14; }
.solution-hero p { max-width:760px; margin:0 auto 26px; color:#d7d9eb; font-size:1.1rem; }
.solution-section { padding:72px 0; }
.solution-section:nth-child(odd) { background:#fff; }
.solution-section h2 { margin-bottom:16px; font-size:clamp(1.7rem,4vw,2.35rem); }
.solution-lead { max-width:840px; color:var(--text-light); font-size:1.05rem; }
.solution-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:32px; }
.solution-card { padding:26px; background:#fff; border:1px solid var(--border-color); border-radius:16px; box-shadow:var(--card-shadow); }
.solution-card h3 { margin-bottom:9px; }
.solution-card p { color:var(--text-light); }
.workflow-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:30px; list-style:none; counter-reset:workflow; }
.workflow-list li { padding:24px; background:var(--primary-soft); border:1px solid #c7d2fe; border-radius:14px; counter-increment:workflow; }
.workflow-list li::before { content:counter(workflow); display:grid; place-items:center; width:34px; height:34px; margin-bottom:12px; color:#fff; background:var(--primary-color); border-radius:50%; font-weight:800; }
.solution-faq { display:grid; gap:14px; margin-top:28px; }
.solution-faq details { padding:18px 20px; background:#fff; border:1px solid var(--border-color); border-radius:12px; }
.solution-faq summary { cursor:pointer; font-weight:700; }
.solution-faq p { padding-top:12px; color:var(--text-light); }
.solution-cta { text-align:center; padding:64px 20px; color:#fff; background:linear-gradient(135deg,#312e81,var(--primary-color)); }
.solution-cta h2 { margin-bottom:10px; }
.solution-cta p { margin-bottom:22px; color:#e0e7ff; }
.scope-notice { max-width:860px; margin-top:22px; padding:16px 18px; color:#3730a3; background:#eef2ff; border:1px solid #c7d2fe; border-radius:12px; }
.content-page { background:var(--bg-secondary); }
.content-hero { padding:68px 0 54px; background:linear-gradient(145deg,#F8F9FF,#EEF2FF); }
.content-hero .container,.content-article { max-width:900px; }
.content-hero h1 { margin:8px 0 12px; font-size:clamp(2rem,5vw,3.25rem); line-height:1.2; }
.content-hero p { color:var(--text-light); font-size:1.05rem; }
.content-meta { margin-top:18px; color:var(--text-light); font-size:.92rem; }
.content-article { margin:42px auto 70px; padding:38px 42px; background:#fff; border:1px solid var(--border-color); border-radius:18px; box-shadow:var(--card-shadow); }
.content-article h2 { margin:34px 0 12px; font-size:1.65rem; }
.content-article h2:first-child { margin-top:0; }
.content-article h3 { margin:24px 0 8px; }
.content-article p,.content-article li { color:#475467; }
.content-article ol,.content-article ul { margin:12px 0 20px 1.25rem; }
.content-article ul { list-style:disc; }
.content-article li { margin:8px 0; }
.content-callout { margin:24px 0; padding:18px 20px; background:var(--primary-soft); border-left:4px solid var(--primary-color); border-radius:10px; }
.guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:24px; }
.guide-card { padding:24px; color:inherit; background:#fff; border:1px solid var(--border-color); border-radius:14px; box-shadow:var(--card-shadow); }
.guide-card:hover { border-color:#a5b4fc; }
.guide-card h2,.guide-card h3 { margin:0 0 8px; }
.guide-card p { color:var(--text-light); }

/* Header */
.site-header {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-color);
}

.logo span,
.main-nav a,
.btn,
.section-eyebrow,
.download-eyebrow,
.verified-badge,
.testimonial-platform,
.platform-download,
.customer-service-trigger span {
    white-space: nowrap;
}

h1, h2, h3, h4, summary {
    overflow-wrap: normal;
    word-break: keep-all;
}

@media (min-width: 1101px) {
    .solution-hero h1,
    .content-hero h1,
    .section-title,
    .qualification-heading h2,
    .download-hero h1,
    .about-hero h1,
    .faq-hero h1 {
        white-space: nowrap;
    }
}

.main-nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    background: #F6F7FC;
    border: 1px solid var(--border-color);
    border-radius: 14px;
}

.main-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 13px;
    font-weight: 500;
    color: var(--text-color);
    border-radius: 10px;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.main-nav a:hover, .main-nav a.active {
    color: var(--primary-color);
    background: #fff;
    box-shadow: 0 4px 14px rgba(31,41,85,.08);
}

.main-nav a:active {
    transform: translateY(1px);
}

.main-nav a[href="download.html"] {
    color: #fff;
    background: linear-gradient(135deg,var(--primary-color),#6366F1);
    box-shadow: 0 7px 16px var(--primary-glow);
}

.main-nav a[href="download.html"]:hover,
.main-nav a[href="download.html"].active {
    color: #fff;
    background: linear-gradient(135deg,var(--primary-hover),var(--primary-color));
}

.nav-dropdown { position:relative; }
.nav-dropdown details { position:relative; }
.nav-dropdown summary {
    display:flex;
    align-items:center;
    gap:6px;
    min-height:38px;
    padding:8px 13px;
    color:var(--text-color);
    border-radius:10px;
    font-weight:500;
    cursor:pointer;
    list-style:none;
    white-space:nowrap;
    transition:color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.nav-dropdown summary::-webkit-details-marker { display:none; }
.nav-dropdown summary::after { content:'⌄'; position:static; margin-left:1px; color:#98a2b3; font-size:.9rem; line-height:1; transform:none; transition:transform .2s ease; }
.nav-dropdown details[open] summary::after { content:'⌄'; transform:rotate(180deg); }
.nav-dropdown summary:hover,
.nav-dropdown details[open] > summary,
.nav-dropdown.has-active > details > summary { color:var(--primary-color); background:#fff; box-shadow:0 4px 14px rgba(31,41,85,.08); }
.nav-submenu {
    position:absolute;
    z-index:1100;
    top:calc(100% + 10px);
    left:50%;
    width:max-content;
    min-width:178px;
    padding:7px;
    background:#fff;
    border:1px solid var(--border-color);
    border-radius:13px;
    box-shadow:0 18px 42px rgba(31,41,85,.16);
    transform:translateX(-50%);
}
.nav-submenu::before { content:''; position:absolute; left:0; right:0; top:-11px; height:11px; }
.nav-submenu a { display:flex; width:100%; min-height:36px; padding:8px 11px; box-shadow:none; }
.nav-submenu a:hover,.nav-submenu a.active { color:var(--primary-color); background:var(--primary-soft); box-shadow:none; }
.nav-submenu a[href="download.html"] { color:var(--text-color); background:transparent; box-shadow:none; }

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    border: 0;
    background: transparent;
    color: var(--text-color);
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    border-radius: 2px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.35);
    outline-offset: 3px;
    border-radius: 4px;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.mobile-menu-toggle span {
    transition: transform .2s ease, opacity .2s ease;
}

/* Hero */
.hero {
    padding: 80px 0;
    background-color: var(--bg-secondary);
}

.hero .container {
    display: flex;
    align-items: center;
    gap: 50px;
}

.hero-content {
    flex: 1;
    min-width: 0;
}

.hero-content h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 800;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 20px;
}

.hero-desc {
    font-size: 1.125rem;
    color: var(--text-light);
    margin-bottom: 40px;
}

.hero-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-light);
}

.hero-image {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.hero-image { width: min(100%, 650px); }
.live-order-console { position: relative; width: 100%; overflow: hidden; color: #c7c9df; background: #111327; border: 1px solid #312e81; border-radius: 15px; box-shadow: 0 28px 70px var(--primary-glow); font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.console-titlebar { height: 40px; padding: 0 14px; display: grid; grid-template-columns: 72px 1fr auto; align-items: center; background: #171932; border-bottom: 1px solid #292b52; font-size: 10px; letter-spacing: .12em; }
.console-titlebar > span { text-align: center; color: #8f91ad; }.console-titlebar b { color: #34d399; font-size: 9px; font-weight: 500; letter-spacing: 0; }
.console-dots { display: flex; gap: 5px; }.console-dots i { width: 8px; height: 8px; border-radius: 50%; background: #fb7185; }.console-dots i:nth-child(2){background:#fbbf24}.console-dots i:nth-child(3){background:#4ade80}
.console-body { display: grid; grid-template-columns: 42px minmax(0,1fr); min-height: 330px; }.console-sidebar { padding: 13px 7px; display: flex; flex-direction: column; gap: 14px; align-items: center; border-right: 1px solid #292b52; font-size: 15px; }.console-sidebar span:first-child { padding: 8px; border-radius: 7px; background: #312e81; }
.console-main { min-width: 0; padding: 13px; }.console-tabs { display: flex; gap: 24px; align-items: center; min-height: 33px; font-size: 11px; }.console-tabs strong { padding: 6px 11px; color: #c7d2fe; background: #3730a3; border-radius: 7px; }.console-tabs em { margin-left: auto; padding: 7px 10px; color: #e0e7ff; background: #1c1e3b; border: 1px solid #343765; border-radius: 8px; font-style: normal; box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.console-table-head,.console-order-row { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1.4fr) minmax(0,.9fr) minmax(54px,.65fr); gap: 10px; align-items: center; }.console-table-head { padding: 10px 10px 6px; color: #75657c; font-size: 9px; }.console-table-head span:last-child,.console-order-row span:last-child{text-align:right}
.console-order-row { margin: 5px 0; padding: 8px 10px; overflow: hidden; background: #17192b; border: 1px solid #303352; border-radius: 7px; font-size: 10px; animation: order-row-in .38s ease both; }.console-order-row.is-printing { border-color: #6366f1; background: #222452; }.console-order-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.console-order-row span:last-child{color:#fff;font-weight:700}
.console-logs { height: 48px; margin-top: 10px; overflow: hidden; color: #a5b4fc; font-size: 8.5px; line-height: 1.7; }.console-log.success{color:#34d399}.console-log::before{content:'› ';color:#777a9d}
.console-auto-badge { position: absolute; left: 8px; bottom: 20px; padding: 8px 10px; color: #ddd2e0; background: rgba(19,14,25,.94); border: 1px solid #33243a; border-radius: 8px; font-size: 9px; box-shadow: 0 8px 18px rgba(0,0,0,.35); }
@keyframes order-row-in { from { opacity:0; transform:translateY(-7px) } to { opacity:1; transform:none } }
@media (max-width: 600px) { .console-body { min-height: 300px; }.console-tabs { gap: 12px; }.console-tabs em { position: absolute; right: 9px; top: 48px; }.console-main { padding: 10px 9px; }.console-table-head,.console-order-row { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,.9fr) 44px; gap:5px; }.console-order-row { font-size: 8.5px; } }

@media (prefers-reduced-motion: reduce) {
    .testimonial-track {
        animation: none;
    }

    .testimonial-lane {
        overflow-x: auto;
    }

    .testimonial-group[aria-hidden="true"] {
        display: none;
    }
}

/* Features */
.features {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    font-size: 2.25rem;
    margin-bottom: 60px;
    font-weight: 700;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.feature-card {
    padding: 30px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    border: 1px solid var(--border-color);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}

.feature-icon {
    margin-bottom: 20px;
    color: var(--primary-color);
}

.feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
}

.feature-card p {
    color: var(--text-light);
}

/* Official partner qualifications */
.qualifications {
    padding: 88px 0;
    background: linear-gradient(135deg, #111827 0%, #171a35 55%, #111827 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.qualifications::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image: radial-gradient(circle at 1px 1px, #c4b5fd 1px, transparent 0);
    background-size: 28px 28px;
    pointer-events: none;
}
.qualifications .container { position: relative; }
.qualification-heading { max-width: none; margin-bottom: 36px; }
.section-eyebrow { display: inline-block; margin-bottom: 10px; color: #a5b4fc; font-size: .78rem; font-weight: 800; letter-spacing: .16em; }
.qualification-heading h2 { margin-bottom: 10px; color: #fff; font-size: clamp(2rem, 4vw, 2.75rem); }
.qualification-heading p { color: #b9afc0; font-size: 1.05rem; }
.qualification-grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1080px; gap: 22px; }
.qualification-card { padding: 26px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(255,255,255,.07); box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.qualification-card-header { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.qualification-card-header h3 { color: #fff; font-size: 1.05rem; line-height: 1.4; }
.qualification-card-header p { color: #8f8498; font-size: .8rem; }
.partner-logo { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; font-weight: 900; font-size: 1.2rem; }
.tiktok-logo { color: #fff; background: #080808; text-shadow: -2px 0 #25f4ee, 2px 0 #fe2c55; }
.shopee-logo { color: #fff; background: #ee4d2d; }
.verified-badge { padding: 5px 10px; color: #6ee7b7; border: 1px solid rgba(110,231,183,.25); border-radius: 999px; background: rgba(16,185,129,.12); font-size: .78rem; white-space: nowrap; }
.qualification-desc { min-height: 74px; margin: 18px 0; color: #b9afc0; line-height: 1.75; }
.certificate-preview { position: relative; display: block; overflow: hidden; border: 5px solid rgba(255,255,255,.88); border-radius: 12px; background: #fff; }
.certificate-preview img { display: block; width: 100%; height: auto; object-fit: contain; transition: transform .25s ease; }
.certificate-preview:hover img { transform: scale(1.015); }
.certificate-preview span { position: absolute; right: 10px; bottom: 10px; padding: 7px 12px; border-radius: 999px; color: #fff; background: rgba(24,18,31,.8); font-size: .8rem; }
.qualification-summary { display: flex; flex-direction: column; }
.qualification-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.qualification-points div { min-height: 106px; padding: 18px 12px; text-align: center; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.045); }
.qualification-points strong, .qualification-points span { display: block; }
.qualification-points strong { color: #fff; margin-bottom: 8px; }
.qualification-points span { color: #9f94a8; font-size: .82rem; line-height: 1.5; }
.evidence-note { margin-top: 18px; color: #8f8498; font-size: .78rem; }

@media (max-width: 860px) {
    .qualification-grid { grid-template-columns: 1fr; }
    .qualification-desc { min-height: 0; }
    .qualification-heading p { white-space: normal; }
}
@media (max-width: 560px) {
    .qualifications { padding: 60px 0; }
    .qualification-card { padding: 20px; }
    .qualification-card-header { grid-template-columns: auto 1fr; }
    .verified-badge { grid-column: 2; width: max-content; }
    .qualification-points { grid-template-columns: 1fr; }
    .qualification-points div { min-height: auto; text-align: left; }
}

/* Download Preview */
.download-preview {
    padding: 80px 0;
    background-color: var(--bg-secondary);
    text-align: center;
}

.download-content {
    max-width: 800px;
    margin: 0 auto;
}

.download-content h2 {
    font-size: 2.25rem;
    margin-bottom: 20px;
}

.download-content p {
    color: var(--text-light);
    margin-bottom: 40px;
}

.os-icons {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
}

.os-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-light);
}

.search-content {
    padding: 80px 0;
    background: var(--bg-secondary);
}

.search-content h2,
.quick-answers h2 {
    text-align: center;
    font-size: 2.25rem;
    margin-bottom: 28px;
}

.search-content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.search-content article,
.quick-answers {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 28px;
}

.search-content article h3,
.quick-answers h3 {
    margin-bottom: 12px;
}

.search-content article p,
.quick-answers p {
    color: var(--text-light);
}

.quick-answers {
    max-width: 900px;
    margin: 0 auto;
    padding: 36px;
}

.quick-answers details {
    padding: 16px 0;
    border-top: 1px solid var(--border-color);
}

.quick-answers summary {
    cursor: pointer;
    font-weight: 600;
}

.quick-answers details p {
    margin-top: 10px;
}

/* Advantages */
.advantages {
    padding: 80px 0;
}

.section-subtitle {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
    color: var(--text-light);
}

.advantage-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.advantage-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1rem;
    padding: 15px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

/* About Preview */
.about-preview {
    padding: 80px 0;
    text-align: center;
    background-color: var(--white);
}

.about-preview p {
    max-width: 800px;
    margin: 0 auto 40px;
    color: var(--text-light);
    font-size: 1.1rem;
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 40px;
}

.stat-box {
    display: flex;
    flex-direction: column;
}

.stat-box strong {
    font-size: 2rem;
    color: var(--primary-color);
}

.stat-box span {
    color: var(--text-light);
}

.link-arrow {
    color: var(--primary-color);
    font-weight: 600;
}

/* Testimonials */
.testimonials {
    padding: 80px 0;
    background-color: var(--bg-secondary);
    overflow: hidden;
}

.testimonials h2 {
    text-align: center;
    font-size: 2.25rem;
    margin-bottom: 12px;
}

.testimonial-heading > p {
    color: var(--text-light);
    text-align: center;
    margin-bottom: 42px;
}

.testimonial-marquee {
    position: relative;
    display: grid;
    gap: 20px;
    padding: 8px 0 18px;
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.testimonial-lane {
    overflow: hidden;
}

.testimonial-track {
    display: flex;
    width: max-content;
    animation: testimonial-scroll-left 42s linear infinite;
    will-change: transform;
}

.testimonial-group {
    display: flex;
    flex: none;
    gap: 20px;
    padding-right: 20px;
}

.testimonial-card {
    width: clamp(300px, 29vw, 390px);
    flex: none;
    background: var(--white);
    padding: 28px 30px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(31,41,55,0.06);
}

.testimonial-card p {
    font-size: 1rem;
    margin-bottom: 18px;
    color: var(--text-color);
}

.testimonial-card .author {
    color: var(--text-light);
    font-size: .9rem;
}

.testimonial-platform {
    display: inline-flex;
    padding: 5px 10px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: #EEF2FF;
    color: var(--primary-color);
    font-size: .8rem;
    font-weight: 700;
}

.testimonial-marquee:hover .testimonial-track,
.testimonial-marquee:focus-within .testimonial-track {
    animation-play-state: paused;
}

@keyframes testimonial-scroll-left {
    to { transform: translateX(-50%); }
}


/* Footer */
.site-footer {
    background-color: #111827;
    color: #D1D5DB;
    padding: 60px 0 20px;
    margin-top: auto;
    flex-shrink: 0;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.45fr .8fr .9fr 1.35fr;
    gap: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #374151;
}

.footer-col h3 {
    color: var(--white);
    margin-bottom: 20px;
}

.footer-col h4 {
    color: var(--white);
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col a:hover {
    color: var(--white);
}

.footer-col p { margin: 7px 0; line-height: 1.65; }
.footer-qr img { display: block; width: 128px; height: 128px; object-fit: cover; padding: 6px; border-radius: 10px; background: #fff; }
.footer-qr p { margin-top: 8px; font-size: .78rem; color: #9ca3af; }

.footer-bottom {
    text-align: center;
    font-size: 0.875rem;
}
.footer-bottom p + p { margin-top: 6px; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Floating customer service */
.customer-service-widget { position: relative; z-index: 1200; }
.customer-service-trigger { position: fixed; z-index: 1201; right: 0; top: 50%; transform: translateY(-50%); width: 48px; padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; background: linear-gradient(180deg,#6366f1,var(--primary-color)); border: 0; border-radius: 10px 0 0 10px; box-shadow: 0 10px 28px var(--primary-glow); cursor: pointer; }
.customer-service-trigger span { writing-mode: vertical-rl; letter-spacing: .12em; font-weight: 700; }
.customer-service-trigger:hover { background: linear-gradient(180deg,#818cf8,var(--primary-hover)); }
.customer-service-overlay { position: fixed; z-index: 1202; inset: 0; background: rgba(15,23,42,.34); backdrop-filter: blur(2px); }
.customer-service-panel { position: fixed; z-index: 1203; right: 72px; top: 50%; transform: translateY(-50%); width: min(360px, calc(100vw - 40px)); padding: 30px; text-align: center; color: #1f2937; background: linear-gradient(145deg,#e0e7ff 0%,#f5f3ff 62%,#fff 100%); border: 1px solid rgba(79,70,229,.2); border-radius: 20px; box-shadow: 0 24px 70px rgba(49,46,129,.25); }
.customer-service-panel[hidden], .customer-service-overlay[hidden] { display: none; }
.customer-service-close { position: absolute; top: 10px; right: 14px; width: 34px; height: 34px; border: 0; color: #64748b; background: transparent; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.customer-service-panel .customer-service-avatar { width: 46px; height: 46px; margin: 0 auto 10px; display: block; object-fit: contain; padding: 2px; border: 2px solid rgba(79,70,229,.2); border-radius: 10px; background: #fff; box-shadow: 0 8px 20px var(--primary-glow); }
.customer-service-panel h2 { margin-bottom: 8px; font-size: 1.55rem; }
.customer-service-panel p { margin-bottom: 20px; color: var(--primary-color); font-size: 1.1rem; font-weight: 700; }
.customer-service-panel img:not(.customer-service-avatar) { display: block; width: min(260px,100%); height: auto; margin: 0 auto; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 8px 28px rgba(37,99,235,.12); }
body.customer-service-open { overflow: hidden; }

@media (max-width: 600px) {
    .customer-service-trigger { top: auto; bottom: 96px; width: 44px; }
    .customer-service-panel { right: 50%; top: 50%; transform: translate(50%,-50%); padding: 26px 22px; }
}

@media (max-width: 768px) {
    .live-order-entry-card { align-items:flex-start; flex-direction:column; padding:30px 24px; }
    .solution-grid,.workflow-list { grid-template-columns:1fr; }
    .guide-grid { grid-template-columns:1fr; }
    .content-article { margin:24px 16px 48px; padding:26px 22px; }
    .site-header .logo span, .legal-header .logo span { max-width: 300px; font-size: .82rem; line-height: 1.25; }
}

@media (max-width: 430px) {
    .site-header .logo span, .legal-header .logo span { max-width: 230px; font-size: .72rem; }
}

@media (min-width: 769px) {
    body.subpage {
        padding-bottom: 0;
    }

    .subpage .site-footer {
        position: static;
        padding: 44px 0 18px;
        box-shadow: none;
    }

    .subpage .footer-top {
        gap: 28px;
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    .subpage .footer-qr img { width: 92px; height: 92px; }
    .subpage .footer-qr p { display: none; }

    .subpage .footer-col h3,
    .subpage .footer-col h4 {
        margin-bottom: 6px;
    }

    .subpage .footer-col li {
        margin-bottom: 3px;
    }
}

/* --- Download Page Styles --- */
.download-hero {
    background: linear-gradient(135deg, #111827 0%, #171a35 60%, #111827 100%);
    color: white;
    padding: 58px 0 120px;
    position: relative;
    overflow: hidden;
}
.download-hero::after { content:""; position:absolute; inset:0; opacity:.16; background-image:radial-gradient(circle at 1px 1px,#a5b4fc 1px,transparent 0); background-size:28px 28px; }
.download-hero .container { position:relative; z-index:1; }
.download-eyebrow { display:block; margin-bottom:10px; color:#a5b4fc; font-size:.78rem; font-weight:800; letter-spacing:.16em; }
.download-hero h1 {
    font-size: clamp(2.2rem,5vw,3.2rem);
    margin-bottom: 8px;
}
.download-hero p { color:#c7c9df; font-size:1.05rem; }
.download-page { background:var(--dark-brand); }
.download-section { margin-top:-76px; padding:0 0 80px; position:relative; z-index:2; background-color:var(--dark-brand); background-image:radial-gradient(circle at 1px 1px,rgba(165,180,252,.12) 1px,transparent 0); background-size:28px 28px; }
.download-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.9fr); gap:18px; }
.download-platform-panel,.download-benefits { padding:32px; color:#d5d7e5; border:1px solid #343765; border-radius:16px; background:linear-gradient(145deg,#17192e,#1d1e38); box-shadow:0 24px 60px rgba(15,23,42,.22); }
.download-platform-panel { position:relative; overflow:hidden; }.download-platform-panel::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,#6366f1,#818cf8,#34d399); }
.download-platform-panel h2,.download-benefits h2 { margin-bottom:6px; color:#fff; font-size:1.35rem; }.download-agreement,.download-benefits>p { color:#a9abc1; }
.download-agreement a { color:#a5b4fc; font-weight:700; }.download-agreement a:hover { color:#fff; }
.system-requirements { display:flex; flex-wrap:wrap; gap:9px 22px; margin:22px 0; color:#a9abc1; font-size:.9rem; }.system-requirements span::before { content:'•'; margin-right:8px; color:#818cf8; }
.platform-downloads { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.platform-download { min-height:72px; padding:13px 16px; display:flex; gap:11px; align-items:center; border:1px solid #3c3f64; border-radius:11px; color:#e8e9f2; background:#252640; }
.platform-download span { display:flex; flex-direction:column; font-weight:700; }.platform-download small { margin-top:2px; color:#9193aa; font-size:.72rem; font-weight:500; }
.platform-download.active { color:#fff; border-color:#6366f1; background:linear-gradient(135deg,#4f46e5,#6366f1); box-shadow:0 10px 26px rgba(79,70,229,.28); }.platform-download.active small { color:#e0e7ff; }.platform-download.active:hover { transform:translateY(-2px); }
.platform-download.disabled { cursor:not-allowed; opacity:.62; }.platform-download.disabled strong { font-size:1.25rem; }
.installation-notice { margin-top:20px; padding:13px 15px; display:flex; gap:10px; align-items:flex-start; color:#c6c7d7; background:#24233b; border:1px solid #444261; border-radius:10px; font-size:.88rem; }
.download-benefits ul { margin-top:18px; }.download-benefits li { position:relative; margin:12px 0; padding-left:27px; color:#b9bbce; }.download-benefits li::before { content:'✓'; position:absolute; left:0; top:1px; width:18px; height:18px; display:grid; place-items:center; color:#34d399; border:1px solid rgba(52,211,153,.35); border-radius:4px; background:rgba(52,211,153,.09); font-size:.72rem; }
@media (max-width:860px){.download-layout{grid-template-columns:1fr}.download-hero{padding-bottom:108px}.download-section{margin-top:-64px}.platform-downloads{grid-template-columns:1fr}.download-platform-panel,.download-benefits{padding:24px}}

/* --- About Page Styles --- */
.about-hero {
    background-color: #F9FAFB;
    padding: 80px 0;
    text-align: center;
}
.about-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}
.about-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    font-size: 1.1rem;
    color: #4B5563;
}
.about-platform { max-width:1160px; }
.about-platform > section + section { margin-top:40px; padding-top:32px; border-top:1px solid var(--border-color); }
.about-platform h2 { margin-bottom:18px; color:var(--text-color); font-size:clamp(1.35rem, 2.4vw, 1.8rem); line-height:1.5; }
.about-platform p { margin-bottom:16px; line-height:1.9; }
.about-roadmap { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:24px 0; }
.about-roadmap article { padding:24px; background:var(--surface-color); border:1px solid var(--border-color); border-radius:16px; }
.about-roadmap h3 { margin:12px 0; font-size:1.15rem; color:var(--text-color); }
.about-roadmap p { margin-bottom:0; font-size:1rem; }
@media(max-width:900px) { .about-roadmap { grid-template-columns:1fr; } }
.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
    margin: 60px 0;
    padding: 40px;
    background: #F3F4F6;
    border-radius: 12px;
}
.about-stat-item strong {
    display: block;
    font-size: 2.5rem;
    color: #4F46E5;
    margin-bottom: 10px;
}
.contact-section {
    text-align: center;
    padding: 60px 0;
    border-top: 1px solid #E5E7EB;
}

/* --- FAQ Page Styles --- */
.faq-hero {
    background-color: #F3F4F6;
    padding: 60px 0;
    text-align: center;
}
.faq-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}
.faq-list {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}
main details, .quick-answers details {
    background: white;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border: 1px solid #E5E7EB;
    overflow: hidden;
}
main summary, .quick-answers summary {
    padding: 20px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    position: relative;
    padding-right: 40px;
}
main summary::-webkit-details-marker, .quick-answers summary::-webkit-details-marker {
    display: none;
}
main summary::after, .quick-answers summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: #4F46E5;
}
main details[open] summary::after, .quick-answers details[open] summary::after {
    content: '-';
}
main details p, .quick-answers details p {
    padding: 0 20px 20px;
    color: #4B5563;
    line-height: 1.6;
    border-top: 1px solid #F3F4F6;
    margin-top: 10px;
    padding-top: 10px;
}

/* Responsive */
@media (max-width: 1100px) {
    .site-header .main-nav { display:none; position:absolute; top:100%; left:0; width:100%; padding:20px; background:var(--white); border-top:1px solid var(--border-color); box-shadow:0 4px 12px rgba(0,0,0,.1); }
    .site-header .main-nav.active { display:block; }
    .site-header .main-nav ul { flex-direction:column; gap:6px; padding:8px; text-align:center; background:transparent; border:0; }
    .site-header .main-nav a { justify-content:center; width:100%; }
    .site-header .nav-dropdown { width:100%; }
    .site-header .nav-dropdown summary { justify-content:center; width:100%; }
    .site-header .nav-submenu { position:static; width:100%; min-width:0; margin-top:5px; padding:5px; background:#fff; border-color:var(--border-color); box-shadow:none; transform:none; }
    .site-header .nav-submenu a { color:var(--text-light); }
    .site-header .mobile-menu-toggle { display:flex; }
}

@media (max-width: 600px) {
    .logo span { white-space: normal; }
    .hero-content h1,
    .solution-hero h1,
    .content-hero h1,
    .section-title,
    .qualification-heading h2,
    .download-hero h1,
    .about-hero h1,
    .faq-hero h1 { white-space: normal; }
}

@media (max-width: 768px) {
    .search-content-grid {
        grid-template-columns: 1fr;
    }

    .site-header .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--white);
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        border-top: 1px solid var(--border-color);
    }
    
    .site-header .main-nav.active {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .hero .container {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }

    .hero {
        padding: 36px 0 56px;
        overflow: hidden;
    }

    .hero-content {
        width: 100%;
        min-width: 0;
    }

    .hero-content h1 {
        font-size: clamp(2rem, 9vw, 2.5rem);
        line-height: 1.18;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }

    .hero-desc {
        font-size: 1rem;
        margin-bottom: 28px;
    }

    .hero-desc br {
        display: none;
    }

    .hero-stats {
        justify-content: center;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 12px;
        width: 100%;
        margin-bottom: 28px;
    }

    .hero-stats .stat-item:last-child {
        grid-column: 1 / -1;
    }

    .stat-item {
        min-width: 0;
    }

    .stat-label {
        overflow-wrap: anywhere;
    }

    .hero-image {
        width: min(100%, 360px);
        margin: 4px auto -30px;
    }

    .hero-image svg {
        width: 100%;
        height: auto;
    }

    .footer-top {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-qr img { margin-inline: auto; }

    .testimonial-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .testimonial-card {
        min-width: 0;
        padding: 28px 24px;
    }

    .stats-grid {
        flex-wrap: wrap;
        gap: 28px;
    }

    .section-title,
    .testimonials h2,
    .search-content h2,
    .quick-answers h2 {
        font-size: 1.8rem;
    }

    .quick-answers {
        padding: 24px 18px;
    }
    
    .download-options {
        grid-template-columns: 1fr;
        margin-top: 20px;
    }
    
    .about-stats {
        grid-template-columns: 1fr;
    }
}

/* Unified visual system — final overrides */
:root { --text-color:#1E2433; --text-light:#667085; --bg-color:#FFFFFF; --bg-secondary:#F6F7FC; --border-color:#E1E4F0; --surface-color:#FFFFFF; --card-radius:16px; --card-shadow:0 14px 36px rgba(31,41,85,.08); }
body { background:var(--bg-color); }
.site-header { background:rgba(255,255,255,.96); border-color:var(--border-color); box-shadow:0 1px 0 rgba(31,41,85,.03); }
.hero,.about-hero,.faq-hero { background:linear-gradient(145deg,#F8F9FF 0%,#EEF2FF 100%); color:var(--text-color); }
.features,.about-preview { background:var(--bg-color); }
.download-preview,.search-content,.advantages,.testimonials,.about-content,.faq-list { background:var(--bg-secondary); }
.feature-card,.search-content article,.quick-answers,.stat-box,.testimonial-card,.about-stat-item,.faq-list details { background:var(--surface-color); border:1px solid var(--border-color); border-radius:var(--card-radius); box-shadow:var(--card-shadow); }
.feature-card:hover { border-color:#C7D2FE; box-shadow:0 18px 42px rgba(79,70,229,.12); }
.feature-icon { color:var(--primary-color); }
.btn,.platform-download,.legal-card,.customer-service-panel { border-radius:12px; }
.btn-primary { background:linear-gradient(135deg,var(--primary-color),#6366F1); box-shadow:0 10px 24px var(--primary-glow); }
.btn-primary:hover { background:linear-gradient(135deg,var(--primary-hover),#4F46E5); }
.site-footer,.legal-footer { background:var(--dark-brand); border-top:1px solid #252B3D; }
.qualifications,.download-hero { background:linear-gradient(135deg,var(--dark-brand) 0%,var(--dark-brand-soft) 55%,var(--dark-brand) 100%); }
.qualification-card,.download-platform-panel,.download-benefits { border-color:#343765; background:linear-gradient(145deg,#17192E,#1D1E38); }
.about-hero h1,.faq-hero h1 { color:var(--text-color); }
.about-hero p,.faq-hero p { color:var(--text-light); }

/* Unified navigation — clean hierarchy and reliable dropdowns */
.site-header { overflow:visible; }
.site-header .container { overflow:visible; }
.site-header .main-nav { overflow:visible; }
.site-header .main-nav > ul {
    gap:2px;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
}
.site-header .main-nav > ul > li > a,
.site-header .nav-menu-button,
.site-header .nav-dropdown summary {
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:40px;
    padding:9px 14px;
    color:#344054;
    background:transparent;
    border:0;
    border-radius:9px;
    box-shadow:none;
    font-size:.95rem;
    font-weight:600;
    font-family:inherit;
    cursor:pointer;
}
.site-header .main-nav > ul > li > a:hover,
.site-header .nav-menu-button:hover,
.site-header .nav-dropdown summary:hover,
.site-header .nav-dropdown details[open] > summary,
.site-header .nav-menu-button[aria-expanded="true"],
.site-header .nav-dropdown.has-active > .nav-menu-button,
.site-header .main-nav > ul > li > a.active:not(.nav-download) {
    color:var(--primary-color);
    background:var(--primary-soft);
    box-shadow:none;
}
.site-header .nav-menu-button::after {
    content:'';
    width:6px;
    height:6px;
    margin:-3px 0 0 2px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);
    opacity:.65;
}
.site-header .nav-dropdown summary::after { content:'⌄'; margin-left:2px; color:currentColor; }
.site-header .nav-menu-button[aria-expanded="true"]::after { content:''; transform:translateY(3px) rotate(225deg); }
.site-header .nav-submenu {
    display:none;
    gap:2px;
    top:calc(100% + 7px);
    left:0;
    min-width:190px;
    padding:8px;
    background:rgba(255,255,255,.99);
    border:1px solid #e4e7ec;
    border-radius:12px;
    box-shadow:0 16px 38px rgba(16,24,40,.14);
    transform:none;
}
.site-header .nav-submenu[hidden] { display:none !important; }
.site-header .nav-dropdown details[open] .nav-submenu { display:grid; }
.site-header .nav-submenu a {
    justify-content:flex-start;
    min-height:38px;
    padding:9px 11px;
    color:#475467;
    background:transparent;
    border-radius:8px;
    font-size:.92rem;
    font-weight:500;
}
.site-header .nav-submenu a:hover,
.site-header .nav-submenu a.active {
    color:var(--primary-color);
    background:var(--primary-soft);
}
.site-header .main-nav > ul > li > .nav-download {
    margin-left:7px;
    padding-inline:17px;
    color:#fff;
    background:linear-gradient(135deg,var(--primary-color),#6366f1);
    box-shadow:0 7px 16px var(--primary-glow);
}
@media (max-width:1100px) {
    .site-header .main-nav > ul { gap:3px; }
    .site-header .main-nav > ul > li > a,
    .site-header .nav-menu-button { justify-content:center; width:100%; }
    .site-header .main-nav > ul > li > .nav-download { margin:6px 0 0; }
    .site-header .nav-submenu { margin-top:4px; }
}