:root {
    --winsend-blue: #2563eb;
    --winsend-ink: #101828;
    --winsend-muted: #667085;
    --winsend-line: #e5e7eb;
}

* {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

html { scroll-behavior: smooth; }

.gradient-text {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 55%, #7c3aed 115%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-bg {
    background:
        radial-gradient(circle at 50% 3%, rgba(96, 165, 250, 0.2), transparent 31rem),
        linear-gradient(180deg, #ffffff 0%, #ffffff 72%, #f8faff 100%);
}

.nav-surface {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.btn-primary {
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px rgba(37, 99, 235, 0.65);
}

.video-stage {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 2rem;
    background: #eef4f8;
    box-shadow: 0 20px 48px -34px rgba(15, 23, 42, 0.28), 0 7px 18px -15px rgba(37, 99, 235, 0.16);
}

.video-stage::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    content: "";
    pointer-events: none;
}

.video-stage video,
.video-stage img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.video-stage video { background: #eef4f8; }
.home-hero .video-stage video { pointer-events: none; }

.direction-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: #344054;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(12px);
}

.direction-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.14);
}

.feature-preview {
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.feature-preview:hover {
    transform: translateY(-4px);
    border-color: #bfdbfe;
    box-shadow: 0 24px 55px -35px rgba(15, 23, 42, 0.55);
}

.play-chip {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    transform: translate(-50%, -50%);
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--winsend-blue);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
}

.feature-section { scroll-margin-top: 6rem; }
.feature-section + .feature-section { border-top: 1px solid var(--winsend-line); }

.fade-up { animation: fade-up 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .video-stage { border-radius: 1.25rem; }
    .direction-badge { top: 0.65rem; left: 0.65rem; padding: 0.42rem 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .fade-up { animation: none; }
    .btn-primary, .feature-preview { transition: none; }
}

/* Compact marketing headers, with separate Chinese typography. */
.home-hero { padding-top: 7.5rem; padding-bottom: 5rem; }
.home-hero .fade-up > p:first-child { margin-bottom: 1.25rem; }
.hero-title { font-size: clamp(2.1rem, 6.1vw, 4.75rem); line-height: 1.08; letter-spacing: -0.045em; }
.hero-title-line { white-space: nowrap; }
.hero-description { margin-top: 1.25rem; font-size: 1.25rem; line-height: 1.65; max-width: 38rem; }
.hero-downloads { margin-top: 1.5rem; }
.hero-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.25rem; margin-top: 0.75rem; }
.hero-benefits span { white-space: nowrap; }
.home-hero .video-stage { margin-top: 2rem; }
.features-hero { padding-top: 7.5rem; padding-bottom: 3.5rem; }
.features-hero h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); line-height: 1.12; }
.features-hero p:last-child { margin-top: 1.25rem; }
html[lang="zh-CN"] .hero-title { letter-spacing: -0.02em; line-height: 1.18; }
html[lang="zh-CN"] main h2 { letter-spacing: 0; }
html[lang="zh-CN"] main .uppercase { text-transform: none; letter-spacing: 0.06em; }

.mobile-menu { display: none; }
.mobile-menu summary { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; cursor: pointer; list-style: none; border: 1px solid #e5e7eb; border-radius: 0.75rem; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu[open] summary { background: #eff6ff; color: #1d4ed8; }
.mobile-menu-panel { position: absolute; top: calc(100% + 0.5rem); right: 1rem; width: 13rem; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 1rem; background: #fff; box-shadow: 0 12px 32px #1018281a; }
.mobile-menu-panel a { display: block; padding: 0.8rem 1rem; border-radius: 0.5rem; }
.mobile-menu-panel a:hover, .mobile-menu-panel a[aria-current] { background: #eff6ff; color: #1d4ed8; }
a:focus-visible, summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
.feature-nav-bar { top: 73px; }
.feature-nav { justify-content: center; }
.feature-nav-link { white-space: nowrap; border-radius: 999px; background: #f3f4f6; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: #374151; transition: background-color 150ms, color 150ms; }
.feature-nav-link:hover { background: #e5e7eb; }
.feature-nav-link[aria-current="location"] { color: white; background: #030712; }
.feature-section { scroll-margin-top: 9rem; }
@media (max-width: 767px) {
    .mobile-menu { display: block; }
    .nav-surface > div { padding: 1rem; }
    .nav-surface > div > div { gap: 0.65rem; }
    .nav-surface > div > a { gap: 0.35rem; }
    .nav-surface > div > a span { font-size: 1.125rem; }
}
@media (max-width: 639px) {
    .home-hero { padding-top: 6.25rem; padding-bottom: 3rem; }
    .hero-title { font-size: clamp(1.9rem, 9.6vw, 3.5rem); }
    html[lang="zh-CN"] .hero-title { font-size: clamp(1.75rem, 8.5vw, 3rem); }
    .hero-description { font-size: 1rem; line-height: 1.7; margin-top: 1rem; }
    .hero-downloads { margin-top: 1.25rem; gap: 0.625rem; }
    .hero-downloads a { width: min(100%, 17rem); min-height: 3rem; padding: 0.75rem 1rem; }
    .hero-benefits { font-size: 0.75rem; gap: 0.35rem 0.875rem; }
    .home-hero .video-stage { margin-top: 1.5rem; }
    .features-hero { padding-top: 6.25rem; padding-bottom: 2.5rem; }
    .feature-nav-bar { padding-left: 0.5rem; padding-right: 0.5rem; }
    .feature-nav { gap: 0.375rem; }
    .feature-nav-link { padding: 0.625rem 0.7rem; font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .feature-nav-link { transition: none; }
}
@media (max-width: 359px) {
    .nav-surface > div { padding: 1rem 0.75rem; }
    .nav-surface > div > a { flex-shrink: 0; gap: 0.25rem; }
    .nav-surface > div > a img { width: 1.75rem; height: 1.75rem; }
    .nav-surface > div > a span { font-size: 1rem; }
    .nav-surface > div > div { gap: 0.5rem; }
    .nav-surface .btn-primary { padding-left: 0.625rem; padding-right: 0.625rem; white-space: nowrap; }
    .nav-surface .mobile-menu summary { width: 2rem; }
}

.transfer-modes { display:flex; justify-content:center; flex-wrap:wrap; gap:0.5rem 1rem; margin-top:1rem; color:#475467; font-size:0.8125rem; }
.transfer-modes span::before { content:'✓'; margin-right:0.375rem; color:#2563eb; }
.rotating-word { display:inline-flex; position:relative; vertical-align:0.2em; align-items:center; justify-content:center; gap:0.4em; height:1.4em; padding:0 0.55em; margin:0 0.1em; border-radius:999px; background:#ede9fe; color:#5b21b6; font-weight:650; line-height:1; overflow:hidden; white-space:nowrap; transition:width 440ms cubic-bezier(.22,1,.36,1),background 400ms,color 400ms; }
.rotating-word[data-index="1"] { background:#ffedd5; color:#9a3412; }
.rotating-word[data-index="2"] { background:#dbeafe; color:#1e40af; }
.word-dot { width:0.35em; height:0.35em; border-radius:50%; background:currentColor; flex-shrink:0; }
.word-value { transition:opacity 180ms ease,transform 180ms ease; }
.word-measure { position:absolute; display:inline-flex; visibility:hidden; align-items:center; gap:0.4em; height:1.4em; padding:0 0.55em; pointer-events:none; white-space:nowrap; }
.word-measure::before { width:0.35em; height:0.35em; flex-shrink:0; border-radius:50%; background:currentColor; content:""; }
.rotating-word.is-changing .word-value { opacity:0; transform:translateY(-0.4em); }
.rotating-word.is-entering .word-value { opacity:0; transform:translateY(0.4em); }
html[lang="zh-CN"] .rotating-word { vertical-align:0.3em; }
.cloud-section { padding:6rem 1.5rem; background:linear-gradient(140deg,#f5f3ff,#eff6ff 65%,#f8fafc); }
.cloud-layout { max-width:1152px; margin:auto; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:4rem; }
.cloud-eyebrow { font-size:0.8125rem; font-weight:700; color:#6d28d9; margin-bottom:1rem; }
.cloud-section h2 { font-size:clamp(2rem,3.6vw,3rem); line-height:1.15; font-weight:750; letter-spacing:-0.035em; }
.cloud-description { margin-top:1.5rem; font-size:1.125rem; line-height:1.8; color:#475467; }
.cloud-cta { display:inline-block; margin-top:1.5rem; font-weight:650; color:#5b21b6; }
.cloud-cta:hover { text-decoration:underline; }
.cloud-limit { margin-top:1.25rem; font-size:0.875rem; line-height:1.7; color:#667085; }
.cloud-visual { padding:2rem; border-radius:2rem; background:rgba(255,255,255,0.65); }
.cloud-device { padding:1.25rem; border-radius:1.125rem; background:#fff; box-shadow:0 8px 28px -16px #64748b80; }
.cloud-device-top { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; }
.cloud-device-top span { font-size:0.75rem; color:#667085; }
.cloud-device p { padding:1rem; margin:1rem 0 0.65rem; border-radius:0.75rem; background:#f5f3ff; color:#4c1d95; line-height:1.6; }
.cloud-device-caption { font-size:0.75rem; color:#667085; }
.cloud-bridge { display:flex; align-items:center; justify-content:center; gap:0.75rem; padding:1.125rem 0; color:#7c3aed; font-size:0.8125rem; }
.cloud-diagram-note { text-align:center; margin-top:1rem; color:#667085; font-size:0.75rem; }
.cloud-steps { max-width:1152px; margin:3rem auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; list-style:none; }
.cloud-steps li { padding:1.5rem; background:#ffffffb3; border-radius:1rem; }
.cloud-steps li > span { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; color:#6d28d9; background:#ede9fe; font-weight:650; }
.cloud-steps h3 { margin-top:1rem; font-weight:700; font-size:1.125rem; }
.cloud-steps p { margin-top:0.5rem; line-height:1.75; color:#475467; }
@media(max-width:767px) {
 .cloud-section { padding:3.5rem 1.25rem; }
 .cloud-layout { grid-template-columns:1fr; gap:2rem; }
 .cloud-visual { padding:1.25rem; }
 .cloud-steps { grid-template-columns:1fr; gap:1rem; margin-top:2rem; }
 .feature-nav { justify-content:flex-start; overflow-x:auto; scrollbar-width:thin; }
 .feature-nav-link { flex-shrink:0; }
}
@media(prefers-reduced-motion:reduce) {
 .rotating-word,.word-value { transition:none; }
}