:root {
    --primary: #3498db;
    --secondary: #2ecc71;
    --text-dark: #2c3e50;
    --text-med: #34495e;
    --text-light: #7f8c8d;
    --bg-start: #f8f9fa;
    --bg-end: #ecf0f1;
    --max-width: 1200px;
    --radius: 20px;
    --shadow: 0 8px 32px rgb(0 0 0 / 5%);
    --transition: 240ms cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--text-dark); font: 16px/1.65 "Microsoft YaHei", "PingFang SC", Arial, sans-serif; background: linear-gradient(135deg, var(--bg-start), var(--bg-end)); }
a { color: inherit; }
img { max-width: 100%; height: auto; }
.skip-link { position: fixed; z-index: 2000; top: .75rem; left: .75rem; padding: .6rem .85rem; background: #fff; border-radius: .4rem; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.button { display: inline-block; padding: .9rem 1.6rem; border-radius: 99rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 8px 20px rgb(52 152 219 / 25%); transition: transform var(--transition), box-shadow var(--transition); }
.button:hover, .button:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 26px rgb(52 152 219 / 32%); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }