/* Basic Reset */
* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin     : 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.55;
    color      : #222;
    background : linear-gradient(145deg, #f7f9fc, #eef2f7);
}

:root {
    --accent    : #0d6efd;
    --accent-rgb: 13, 110, 253;
    --bg-card   : #fff;
    --border    : #e2e8f0;
    --radius    : 18px;
    --shadow    : 0 4px 12px -2px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);
}

.site-header {
    backdrop-filter: blur(12px);
    background     : rgba(255, 255, 255, .7);
    border-bottom  : 1px solid var(--border);
    position       : sticky;
    top            : 0;
    z-index        : 10;
}

.site-header .inner {
    max-width      : 960px;
    margin         : 0 auto;
    padding        : .75rem 1.25rem;
    display        : flex;
    gap            : 1rem;
    align-items    : center;
    justify-content: space-between;
}

#brand {
    font-size     : 1.15rem;
    margin        : 0;
    font-weight   : 600;
    letter-spacing: .5px;
}

.lang-switch button {
    background   : none;
    border       : 1px solid transparent;
    padding      : .35rem .65rem;
    margin       : .15rem;
    border-radius: 8px;
    cursor       : pointer;
    font-size    : .8rem;
    font-weight  : 500;
    color        : #555;
    transition   : .25s;
}

.lang-switch button.active,
.lang-switch button:hover {
    background  : rgba(var(--accent-rgb), .08);
    border-color: rgba(var(--accent-rgb), .3);
    color       : #000;
}

.main {
    padding: 2.5rem 1rem 3.5rem;
}

.inner {
    max-width: 960px;
    margin   : 0 auto;
}

.card {
    background   : var(--bg-card);
    border       : 1px solid var(--border);
    border-radius: var(--radius);
    padding      : 2.2rem clamp(1.2rem, 3vw, 3rem);
    box-shadow   : var(--shadow);
}

.card h2 {
    margin-top    : 0;
    font-size     : clamp(1.7rem, 4.2vw, 2.6rem);
    letter-spacing: .5px;
}

.domain {
    font-size  : clamp(1.3rem, 3.5vw, 2rem);
    font-weight: 600;
    color      : #000;
    margin     : .2rem 0 1.1rem;
    word-break : break-word;
}

.contact-box {
    margin: 1.1rem 0 2rem;
}

.email {
    display        : inline-block;
    font-size      : 1.05rem;
    font-weight    : 600;
    color          : var(--accent);
    text-decoration: none;
    position       : relative;
}

.email::after {
    content         : "";
    position        : absolute;
    left            : 0;
    bottom          : -2px;
    height          : 2px;
    width           : 100%;
    background      : linear-gradient(90deg, var(--accent), #6ea8fe);
    transform       : scaleX(.4);
    transform-origin: left;
    transition      : .4s;
}

.email:hover::after {
    transform: scaleX(1);
}

.why {
    margin: 1.8rem 0 2.4rem;
}

.why h3,
.cta h3 {
    margin        : 0 0 .8rem;
    font-size     : 1.15rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-weight   : 600;
    color         : #111;
}

.bullets {
    list-style: none;
    margin    : 0;
    padding   : 0;
    display   : grid;
    gap       : .6rem;
}

.bullets li {
    position    : relative;
    padding-left: 1.4rem;
}

.bullets li::before {
    content      : "";
    position     : absolute;
    left         : 0;
    top          : .55rem;
    width        : .65rem;
    height       : .65rem;
    border-radius: 50%;
    background   : linear-gradient(135deg, var(--accent), #5ca3ff);
    box-shadow   : 0 0 0 3px rgba(var(--accent-rgb), .15);
}

.cta p {
    margin: .2rem 0 0;
}

.site-footer {
    border-top     : 1px solid var(--border);
    padding        : 1.2rem 1rem;
    text-align     : center;
    font-size      : .75rem;
    color          : #555;
    background     : #fff9;
    backdrop-filter: blur(8px);
}

.no-js {
    padding   : .75rem 1rem;
    background: #222;
    color     : #fff;
    font-size : .85rem;
    text-align: center;
}

/* 屏幕阅读器可见，视觉隐藏 */
.sr-only {
    position   : absolute !important;
    width      : 1px !important;
    height     : 1px !important;
    padding    : 0 !important;
    margin     : -1px !important;
    overflow   : hidden !important;
    clip       : rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border     : 0 !important;
}

@media (max-width:600px) {
    .card {
        padding: 1.9rem 1.1rem 2.2rem;
    }

    .lang-switch button {
        font-size: .72rem;
    }
}