/* Page-specific atmosphere and flow; global design lives in site.css. */
:root { --line: rgba(15, 23, 42, 0.08); }
html { scroll-padding-top: 88px; }
a:focus-visible, button:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 4px;
}
.care-grid {
    background-image: linear-gradient(rgba(96, 165, 250, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 165, 250, 0.05) 1px, transparent 1px),
        radial-gradient(ellipse at 75% 40%, rgba(96, 165, 250, 0.12), transparent 65%);
    background-size: 64px 64px, 64px 64px, auto;
    mask-image: linear-gradient(to bottom, black, transparent);
}
.care-tag {
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
}
.care-flow li { position: relative; }
.care-flow li:not(:last-child)::after {
    content: '↓';
    position: absolute;
    bottom: -28px;
    left: 50%;
    color: #60a5fa;
    font-size: 18px;
    transform: translateX(-50%);
}
@media (min-width: 1280px) {
    .care-flow li:not(:last-child)::after {
        content: '→';
        left: auto;
        right: -20px;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* 手機展示框 */
.phone-frame {
    position: relative;
    padding: 10px 10px 18px;
    background: linear-gradient(155deg, #1e293b 0%, #0f172a 48%, #1e3a5f 100%);
    border-radius: 2.35rem;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 40px 80px -20px rgba(15, 23, 42, 0.45),
        0 20px 40px -30px rgba(59, 130, 246, 0.35);
}
.phone-frame::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 32%;
    max-width: 120px;
    height: 22px;
    background: #0f172a;
    border-radius: 999px;
    z-index: 2;
}
.phone-frame-inner {
    border-radius: 1.85rem;
    overflow: hidden;
    background: #0f172a;
}
.phone-frame img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}
/* 桌面瀏覽器框 */
.browser-frame {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 0 0 1px var(--line),
        0 32px 64px -24px rgba(15, 23, 42, 0.2);
}
.browser-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--line);
}
.browser-dot { width: 10px; height: 10px; border-radius: 50%; }
.browser-dot:nth-child(1) { background: #fb7185; }
.browser-dot:nth-child(2) { background: #fbbf24; }
.browser-dot:nth-child(3) { background: #34d399; }
.browser-url {
    flex: 1;
    margin-left: 8px;
    height: 26px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.04);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-family: 'Outfit', sans-serif;
}