/* Palette lives in these variables. Swap them when Felix picks a direction. */
:root{--bg:#121212;--ink:#FFFFFF;--muted:#D6D6D6;--accent:#D42A32;--accent-on-dark:#F0444C;--accent-ink:#FFFFFF;--surface:#FFFFFF;--surface-ink:#1A1A1A;--line:#E5E5E5;--radius:14px;
font-size:20px}
*{box-sizing:border-box}
body{margin:0;font-family:"Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--surface-ink);background:var(--surface);line-height:1.6}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
header{position:absolute;inset:0 0 auto 0;z-index:5;color:var(--ink)}
header.solid{position:static;background:var(--bg)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:88px;gap:20px}
.logo{font-weight:900;font-size:1.5rem;text-decoration:none;letter-spacing:-.5px}
.logo span{color:var(--accent-on-dark)}
nav ul{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:999px;text-decoration:none;font-weight:700;font-size:1rem}
nav a:hover,nav a:focus-visible{background:#ffffff22}
nav a[aria-current=page]{background:var(--btn-bg);color:var(--btn-ink)}
.menu-btn{display:none;min-height:48px;min-width:48px;border:2px solid var(--ink);background:none;color:var(--ink);border-radius:12px;font-size:1rem;font-weight:700}
.hero{position:relative;min-height:min(100vh,860px);display:flex;align-items:center;color:var(--ink);overflow:hidden;background:var(--bg)}
.hero video,.hero .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .ph{background:radial-gradient(circle at 20% 30%,#3a3a3a,transparent 50%),radial-gradient(circle at 80% 70%,#5a1d20,transparent 55%),#141414;animation:drift 14s ease-in-out infinite alternate;background-size:140% 140%}
@keyframes drift{to{background-position:100% 100%}}
@media (prefers-reduced-motion:reduce){.hero .ph{animation:none}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0008,#0006 60%,#000a)}
.hero .wrap{position:relative;z-index:2}
.tag{display:inline-block;font-size:.8rem;border:1px dashed #fff8;padding:4px 10px;border-radius:8px;margin-bottom:18px;opacity:.85}
h1{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.05;margin:0 0 20px;font-weight:900;letter-spacing:-1px}
h1 em{font-style:normal;color:var(--accent-on-dark)}
.lead{font-size:1.25rem;max-width:640px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;border-radius:999px;background:var(--btn-bg);color:var(--btn-ink);font-weight:800;font-size:1.05rem;text-decoration:none;border:0;cursor:pointer;margin-top:12px}
.btn:focus-visible,nav a:focus-visible{outline:4px solid #FFD54A;outline-offset:3px}
section{padding:96px 0}
h2{font-size:clamp(2rem,4vw,2.8rem);line-height:1.15;margin:0 0 16px;font-weight:900}
.kicker{color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:1.5px;font-size:.85rem}
.dark .kicker{color:var(--accent-on-dark)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.card{border:2px solid var(--line);border-radius:var(--radius);padding:30px}
.card .img{aspect-ratio:4/3;border-radius:10px;background:repeating-linear-gradient(45deg,#f1f1f1,#f1f1f1 12px,#e7e7e7 12px,#e7e7e7 24px);display:flex;align-items:center;justify-content:center;color:#777;font-size:.8rem;margin-bottom:20px}
.card h3{margin:0 0 8px;font-size:1.3rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split .img{aspect-ratio:1;border-radius:var(--radius);background:repeating-linear-gradient(45deg,#f1f1f1,#f1f1f1 12px,#e7e7e7 12px,#e7e7e7 24px);display:flex;align-items:center;justify-content:center;color:#777}
.dark{background:var(--bg);color:var(--ink)}.dark .lead{color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.stats div{border-top:4px solid var(--accent);padding-top:16px;font-size:1.1rem}
.stats b{display:block;font-size:2.2rem}
footer{background:var(--bg);color:var(--muted);padding:48px 0;font-size:1rem}
footer .bar{flex-wrap:wrap}
footer a{min-height:48px;display:inline-flex;align-items:center;padding:0 10px}
.page-head{background:var(--bg);color:var(--ink);padding:72px 0}
.doc{max-width:820px}
.doc h2{font-size:1.6rem;margin-top:48px}
.todo{background:#FFF4D6;border-left:6px solid #E0A800;padding:16px 20px;border-radius:8px;margin:24px 0;color:#5a4300}
@media (max-width:820px){
 :root{font-size:19px}
 .grid,.stats,.split{grid-template-columns:1fr}
 .menu-btn{display:inline-block}
 nav ul{display:none;position:absolute;top:84px;left:16px;right:16px;flex-direction:column;background:var(--bg);padding:12px;border-radius:16px}
 nav.open ul{display:flex}
 nav a{width:100%;min-height:56px;font-size:1.1rem}
 section{padding:64px 0}
 .hero{min-height:min(100vh,720px)}
}
.hero video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.hero video.bg{display:none}}
nav a{white-space:nowrap}

.mail{color:var(--accent);font-weight:800;text-decoration:underline;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:48px;word-break:break-all}
.need{background:#FFE066;color:#1A1A1A;padding:0 4px;border-radius:4px}
/* E1 暖色浅调：B 的轻松 + D 的红 */
:root{--bg:#3A2C4F;--ink:#FFFFFF;--muted:#EDE6F5;--accent:#D93F45;--accent-on-dark:#FF7A7F;--surface:#FFF8F2;--surface-ink:#2E2542;--line:#F0E2D6}
.hero .ph{background:radial-gradient(circle at 18% 30%,#6B4E8F,transparent 55%),radial-gradient(circle at 82% 72%,#E86A5C,transparent 55%),#3A2C4F}
.hero::after{background:linear-gradient(180deg,#2a1f3a55,#2a1f3a33 60%,#2a1f3a77)}
.grid .card{border:0;border-radius:28px}
.grid .card:nth-child(1){background:#DDF4EA}.grid .card:nth-child(2){background:#FFE3EA}.grid .card:nth-child(3){background:#ECE4FB}
.card .img,.split .img{background:#ffffff99;color:#7a6f8f;border-radius:18px}
.dark{background:#3A2C4F}
/* F1：E1 的深色块调淡 */
:root{--bg:#6B5C8E;--accent:#C8363C;--accent-on-dark:#FFB3B6;--btn-bg:rgba(255,214,216,.75);--btn-ink:var(--surface-ink)}
.hero .ph{background:radial-gradient(circle at 18% 30%,#9A86C2,transparent 55%),radial-gradient(circle at 82% 72%,#F08A7C,transparent 55%),#6B5C8E}
.hero::after{background:linear-gradient(180deg,#3a2c5022,#3a2c5011 60%,#3a2c5033)}
.dark{background:#6B5C8E}.dark .kicker{color:#FFE3E4}
/* F1 定稿（Felix 2026-10-20）：首屏遮罩加深到约 40 到 50%，文字侧更深 */
.hero::after{background:linear-gradient(90deg,#2A1F3A80,#2A1F3A66 50%,#2A1F3A40)}
@media (max-width:820px){.hero::after{background:#2A1F3A80}}
.hero h1,.hero .lead{text-shadow:0 2px 12px #2A1F3A66}
footer{font-size:1.1rem}
/* 真实图片 */
.img.has-img{background:none;padding:0;overflow:hidden}
.img.has-img img{width:100%;height:100%;object-fit:cover;display:block}
footer{border-top:1px solid #FFFFFF33}
/* Contact page: support email card (scoped to .contact-card) */
.contact-card{background:#FFFFFF;border-radius:var(--radius);box-shadow:0 4px 18px rgba(46,37,66,.08);padding:28px 30px;max-width:560px}
.contact-card .contact-addr{margin:0 0 10px;font-size:1.25rem;font-weight:700;color:var(--surface-ink);overflow-wrap:anywhere}
.contact-card .contact-addr a{text-decoration:none}
.contact-card .contact-addr a:hover{text-decoration:underline}
.contact-card p{margin:0 0 8px}
.contact-card .btn{background:#6B5C8E;color:#FFFFFF;border:none}
@media (max-width:480px){.contact-card{padding:22px 20px}.contact-card .contact-addr{font-size:1.15rem}}