:root {
  --cream: #fffaf7;
  --cream-deep: #f9efeb;
  --rose: #f5dedd;
  --rose-soft: #fcebea;
  --red: #ad2d27;
  --red-dark: #83201c;
  --ink: #1f2937;
  --muted: #6b7280;
  --line: #ead8d4;
  --white: #ffffff;
  --shadow: 0 24px 60px rgba(100, 39, 35, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--red); }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 9999; padding: 10px 16px; background: var(--ink); color: white; border-radius: 10px; }
.skip-link:focus { top: 20px; }
.container { max-width: 1180px; }
.narrow-container { max-width: 840px; }
.site-header { position: relative; z-index: 10; border-bottom: 1px solid rgba(173,45,39,.12); background: rgba(255,250,247,.92); backdrop-filter: blur(16px); }
.site-header-inner { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: var(--red-dark); }
.brand-logo { width: 58px; height: 58px; object-fit: contain; }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-size: 22px; letter-spacing: .02em; }
.brand-copy small { margin-top: 7px; color: #8b6b68; font-size: 11px; font-weight: 700; letter-spacing: .28em; }
.header-pill { padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--red); font-size: 13px; font-weight: 700; background: rgba(255,255,255,.7); }
.message-stack { margin-top: 18px; }
.alert { border: 0; border-radius: 14px; }

.hero-section { padding: 64px 0 74px; background: radial-gradient(circle at 8% 30%, rgba(246,205,202,.45), transparent 30%), linear-gradient(180deg,#fffaf7 0%,#faece9 100%); overflow: hidden; }
.hero-card { min-height: 600px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 28px; padding: 72px 76px; border: 1px solid rgba(177,67,58,.18); border-radius: 44px; background: rgba(255,255,255,.86); box-shadow: var(--shadow); overflow: hidden; }
.eyebrow,.section-tag { display: inline-flex; width: max-content; color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: .2em; }
.hero-kicker { display: block; margin-top: 24px; color: #9b6966; font-size: clamp(20px,2.3vw,30px); font-weight: 700; }
.hero-copy h1 { margin: 8px 0 24px; font-size: clamp(52px,6vw,82px); line-height: 1.02; letter-spacing: -.05em; font-weight: 850; }
.hero-copy h1 span { color: var(--red); }
.hero-copy p { max-width: 650px; color: var(--muted); font-size: 19px; line-height: 1.75; }
.btn { border-radius: 999px; padding: 12px 24px; font-weight: 750; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn-brand { border: 1px solid var(--red); background: var(--red); color: white; box-shadow: 0 12px 26px rgba(173,45,39,.2); }
.btn-brand:hover,.btn-brand:focus { border-color: var(--red-dark); background: var(--red-dark); color: white; transform: translateY(-1px); box-shadow: 0 16px 32px rgba(131,32,28,.24); }
.btn-brand:disabled { background: #bda6a3; border-color: #bda6a3; box-shadow: none; transform: none; }
.btn-outline-brand { border: 1px solid #d7aaa5; color: var(--red); background: white; }
.btn-outline-brand:hover { color: white; background: var(--red); border-color: var(--red); }
.hero-copy .btn { margin-top: 18px; padding: 16px 30px; }
.hero-copy .btn span { margin-left: 14px; }
.hero-visual { position: relative; min-height: 420px; display: grid; place-items: center; }
.shield { position: relative; z-index: 3; width: 190px; height: 220px; display: grid; place-items: center; background: linear-gradient(145deg,#c6473f,#8f221e); clip-path: polygon(50% 0, 93% 16%, 88% 69%, 50% 100%, 12% 69%, 7% 16%); filter: drop-shadow(0 24px 28px rgba(117,34,30,.24)); }
.shield:after { content:""; position:absolute; inset:14px; border:1px solid rgba(255,255,255,.45); clip-path:inherit; }
.shield span { width: 66px; height: 66px; display:grid; place-items:center; border-radius:50%; background:white; color:var(--red); font-size:34px; font-weight:800; }
.orbit { position:absolute; border:1px solid #edcbc7; border-radius:50%; }
.orbit-one { width:360px; height:360px; }
.orbit-two { width:290px; height:290px; border-style:dashed; }
.mini-card { position:absolute; z-index:4; min-width:170px; padding:17px 20px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.94); color:#8a625f; font-size:12px; box-shadow:0 18px 36px rgba(104,45,40,.1); }
.mini-card strong { display:block; margin-top:4px; color:var(--ink); font-size:14px; }
.card-a { top:54px; right:-16px; }
.card-b { bottom:38px; left:-12px; }

.overview-section { padding: 96px 0 56px; }
.section-heading { max-width: 720px; margin-bottom: 36px; }
.section-heading h2,.privacy-card h2 { margin: 13px 0 12px; font-size: clamp(34px,4vw,50px); letter-spacing: -.04em; font-weight: 820; }
.section-heading p,.privacy-card p { color: var(--muted); font-size: 17px; line-height: 1.7; }
.step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.step-card { position:relative; min-height:300px; padding:34px; border:1px solid var(--line); border-radius:30px; background:white; box-shadow:0 16px 40px rgba(85,44,40,.06); }
.step-card.featured { color:white; border-color:var(--red); background:linear-gradient(145deg,#b6332c,#81201c); transform:translateY(-8px); }
.step-number { position:absolute; top:28px; right:30px; color:#d8b6b2; font-size:13px; font-weight:800; letter-spacing:.12em; }
.step-icon { width:56px; height:56px; display:grid; place-items:center; border-radius:18px; background:var(--rose-soft); color:var(--red); font-size:24px; font-weight:800; }
.featured .step-icon { background:rgba(255,255,255,.15); color:white; }
.step-card h3 { margin:42px 0 12px; font-size:24px; font-weight:800; }
.step-card p { color:var(--muted); line-height:1.7; }
.featured p { color:rgba(255,255,255,.78); }
.facts-section { padding:32px 0 78px; }
.facts-card { display:grid; grid-template-columns:repeat(4,1fr); padding:34px; border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:0 16px 42px rgba(85,44,40,.05); }
.facts-card > div { padding:10px 30px; border-right:1px solid var(--line); }
.facts-card > div:last-child { border:0; }
.facts-card span,.facts-card small { display:block; color:var(--muted); }
.facts-card strong { display:block; margin:6px 0; color:var(--red); font-size:35px; letter-spacing:-.04em; }
.privacy-section { padding:0 0 96px; }
.privacy-card { display:flex; align-items:center; justify-content:space-between; gap:50px; padding:48px 52px; border-radius:32px; background:linear-gradient(135deg,#f8e5e2,#fff 70%); border:1px solid var(--line); }
.privacy-card > div { max-width:800px; }
.privacy-card h2 { font-size:34px; }

.page-section { padding:72px 0 100px; min-height:65vh; background:radial-gradient(circle at 100% 0,rgba(245,211,208,.55),transparent 34%); }
.form-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:55px; align-items:start; }
.form-aside { position:sticky; top:30px; padding-top:34px; }
.form-aside h1,.content-card h1 { margin:14px 0 18px; font-size:clamp(38px,5vw,56px); line-height:1.08; letter-spacing:-.045em; font-weight:830; }
.form-aside p { color:var(--muted); font-size:17px; line-height:1.75; }
.aside-note { display:grid; gap:11px; margin-top:34px; padding:24px; border-left:3px solid var(--red); background:rgba(255,255,255,.6); border-radius:0 18px 18px 0; }
.aside-note span { color:var(--muted); font-size:14px; }
.content-card { padding:42px; border:1px solid var(--line); border-radius:32px; background:#fff; box-shadow:var(--shadow); }
.form-progress { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:32px; color:#aa9997; font-size:12px; font-weight:800; }
.form-progress span { padding-bottom:10px; border-bottom:3px solid #f0e7e5; }
.form-progress .active { color:var(--red); border-color:var(--red); }
.form-label { margin-bottom:8px; color:#3d3534; font-weight:750; }
.form-control,.form-select { min-height:52px; padding:12px 15px; border-color:#e2d6d3; border-radius:13px; background:#fffdfc; }
.form-control:focus,.form-select:focus { border-color:#c86a63; box-shadow:0 0 0 .22rem rgba(173,45,39,.12); }
.field-error { margin-top:7px; color:#b42318; font-size:13px; }
.privacy-check { padding:16px 16px 16px 42px; border-radius:14px; background:var(--rose-soft); }
.privacy-check a { margin-left:4px; }
.verify-card,.ready-card { padding:58px; }
.mail-icon,.ready-mark,.empty-icon { width:78px; height:78px; margin:0 auto 24px; display:grid; place-items:center; border-radius:26px; background:var(--rose-soft); color:var(--red); font-size:34px; font-weight:850; }
.verify-card p,.ready-card > p { color:var(--muted); font-size:17px; line-height:1.7; }
.verify-card form { max-width:420px; margin-left:auto; margin-right:auto; }
.code-input { height:70px; text-align:center; font-size:32px; font-weight:800; letter-spacing:.45em; }
.brand-link { color:var(--red); text-decoration:none; }
.verify-card small { display:block; margin-top:24px; color:#96807e; }
.ready-card { text-align:center; }
.ready-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:34px 0; }
.ready-grid div { padding:20px 10px; border-radius:18px; background:#fff8f5; border:1px solid var(--line); }
.ready-grid strong,.ready-grid span { display:block; }
.ready-grid strong { color:var(--red); font-size:18px; }
.ready-grid span { margin-top:6px; color:var(--muted); font-size:12px; }
.rules { margin:28px 0; padding:24px 28px; text-align:left; border-radius:20px; background:#f8f7f5; }
.rules h2 { font-size:17px; }
.rules ul { margin-bottom:0; color:var(--muted); line-height:1.9; }
.empty-state { text-align:center; }
.empty-state ul { max-width:520px; margin:20px auto; text-align:left; color:var(--muted); }
.prose-card h2 { margin-top:32px; font-size:23px; }
.prose-card p { color:var(--muted); line-height:1.8; }

.exam-shell { padding:52px 0 100px; background:#f8efeb; min-height:100vh; }
.exam-topbar { display:flex; justify-content:space-between; gap:32px; margin-bottom:30px; padding:36px 40px; border-radius:28px; background:#fff; border:1px solid var(--line); }
.exam-topbar h1 { margin:11px 0 0; font-size:32px; font-weight:820; }
.progress-box { width:280px; }
.progress-box > div:first-child { display:flex; align-items:baseline; gap:4px; margin-bottom:10px; color:var(--muted); font-size:13px; }
.progress-box strong { margin-left:auto; color:var(--red); font-size:24px; }
.progress { height:8px; background:#f1e5e2; }
.progress-bar { background:var(--red); }
.progress-box small { display:block; margin-top:9px; color:#8d7774; }
.question-list { display:grid; gap:22px; }
.question-card { padding:38px 42px; border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:0 14px 35px rgba(85,44,40,.05); }
.question-meta { display:flex; justify-content:space-between; color:#9b7773; font-size:11px; font-weight:800; letter-spacing:.14em; }
.question-card h2 { margin:22px 0 28px; font-size:22px; line-height:1.55; font-weight:750; }
.option-list { display:grid; gap:11px; }
.option-row { display:grid; grid-template-columns:42px 1fr 28px; align-items:center; gap:14px; min-height:62px; padding:11px 15px; border:1px solid #e6dcd9; border-radius:16px; cursor:pointer; transition:.15s ease; }
.option-row:hover { border-color:#cc8c86; background:#fffaf9; }
.option-row input { position:absolute; opacity:0; pointer-events:none; }
.option-letter { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#f5edeb; color:#76615e; font-weight:800; }
.option-text { line-height:1.5; }
.option-check { color:transparent; font-weight:900; }
.option-row.selected { border-color:var(--red); background:var(--rose-soft); box-shadow:0 0 0 2px rgba(173,45,39,.07); }
.option-row.selected .option-letter { color:white; background:var(--red); }
.option-row.selected .option-check { color:var(--red); }
.submit-panel { position:sticky; bottom:18px; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:22px; margin-top:26px; padding:22px 26px; border:1px solid rgba(173,45,39,.18); border-radius:22px; background:rgba(255,255,255,.94); box-shadow:0 20px 48px rgba(73,31,28,.15); backdrop-filter:blur(14px); }
.submit-panel strong,.submit-panel span { display:block; }
.submit-panel span { margin-top:4px; color:var(--muted); font-size:13px; }

.result-section { padding:72px 0 110px; background:linear-gradient(180deg,#f8e8e5 0%,#fffaf7 70%); }
.result-hero { padding:50px; text-align:center; border:1px solid var(--line); border-radius:34px 34px 0 0; background:#fff; }
.result-label { color:var(--red); font-size:12px; font-weight:850; letter-spacing:.2em; }
.result-hero h1 { margin:12px 0 28px; font-size:42px; font-weight:830; }
.score-ring { width:190px; height:190px; margin:0 auto 20px; display:grid; place-content:center; border:12px solid #efd7d4; border-top-color:var(--red); border-radius:50%; }
.score-ring strong { color:var(--red); font-size:68px; line-height:.9; }
.score-ring span { color:var(--muted); }
.result-status { display:inline-flex; padding:9px 15px; border-radius:999px; color:#27754a; background:#e8f7ee; font-weight:750; }
.not-passed .result-status { color:#9a5c11; background:#fff1d6; }
.result-details { border-radius:0 0 34px 34px; }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.result-grid > div { padding:19px 22px; border-radius:17px; background:#faf7f5; }
.result-grid span,.result-grid strong { display:block; }
.result-grid span { margin-bottom:6px; color:var(--muted); font-size:12px; }
.certificate-box { display:grid; grid-template-columns:74px 1fr auto; align-items:center; gap:22px; margin-top:28px; padding:26px; border-radius:22px; background:linear-gradient(135deg,#f8e4e1,#fff); border:1px solid var(--line); }
.certificate-icon { width:68px; height:68px; display:grid; place-items:center; border-radius:20px; color:white; background:var(--red); font-size:28px; }
.certificate-box h2 { margin:6px 0; font-size:20px; }
.certificate-box p { margin:0; color:var(--muted); font-size:13px; }

.site-footer { padding:58px 0 26px; color:#705c59; background:#f4e9e5; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:60px; align-items:start; }
.footer-grid strong { color:var(--red-dark); font-size:20px; }
.footer-grid p { margin-top:8px; }
.disclaimer { line-height:1.7; font-size:13px; }
.footer-bottom { display:flex; justify-content:space-between; margin-top:34px; padding-top:20px; border-top:1px solid #dfcfcb; font-size:12px; }
.footer-bottom a { text-decoration:none; }

@media (max-width: 991px) {
  .hero-card { grid-template-columns:1fr; padding:52px 44px; }
  .hero-visual { min-height:330px; }
  .step-grid { grid-template-columns:1fr; }
  .step-card.featured { transform:none; }
  .facts-card { grid-template-columns:1fr 1fr; }
  .facts-card > div:nth-child(2) { border-right:0; }
  .form-layout { grid-template-columns:1fr; }
  .form-aside { position:static; padding:0; }
  .exam-topbar { flex-direction:column; }
  .progress-box { width:100%; }
  .certificate-box { grid-template-columns:70px 1fr; }
  .certificate-box .btn { grid-column:1/-1; }
}

@media (max-width: 640px) {
  .site-header-inner { min-height:80px; }
  .brand-logo { width:46px; height:46px; }
  .brand-copy strong { font-size:17px; }
  .header-pill { display:none; }
  .hero-section { padding:24px 0 44px; }
  .hero-card { min-height:auto; padding:38px 24px; border-radius:28px; }
  .hero-copy h1 { font-size:43px; }
  .hero-copy p { font-size:16px; }
  .hero-visual { min-height:290px; transform:scale(.84); margin:-10px -20px; }
  .overview-section { padding:64px 0 32px; }
  .step-card { min-height:auto; padding:28px; }
  .facts-card { grid-template-columns:1fr 1fr; padding:18px; }
  .facts-card > div { padding:15px 12px; border-bottom:1px solid var(--line); }
  .facts-card > div:nth-child(3),.facts-card > div:nth-child(4) { border-bottom:0; }
  .facts-card strong { font-size:27px; }
  .privacy-card { display:block; padding:32px 26px; }
  .privacy-card .btn { margin-top:18px; }
  .page-section { padding:42px 0 72px; }
  .content-card { padding:28px 22px; border-radius:24px; }
  .verify-card,.ready-card { padding:36px 22px; }
  .ready-grid { grid-template-columns:1fr; }
  .question-card { padding:28px 20px; border-radius:22px; }
  .question-card h2 { font-size:19px; }
  .option-row { grid-template-columns:38px 1fr 22px; padding:10px; }
  .submit-panel { align-items:stretch; flex-direction:column; bottom:8px; }
  .submit-panel .btn { width:100%; }
  .result-hero { padding:38px 22px; }
  .result-hero h1 { font-size:32px; }
  .score-ring { width:160px; height:160px; }
  .result-grid { grid-template-columns:1fr; }
  .certificate-box { grid-template-columns:1fr; text-align:center; }
  .certificate-icon { margin:auto; }
  .footer-grid { grid-template-columns:1fr; gap:20px; }
}