:root { --ink:#191918; --paper:#f7f4ef; --card:#fffdfa; --orange:#e94b25; --gold:#c99a42; --dark:#242321; --line:#d9cfc2; font-family:"Segoe UI Variable Text","Segoe UI",Arial,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background-color:var(--paper); background-image:linear-gradient(rgba(95,75,55,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(95,75,55,.045) 1px,transparent 1px); background-size:52px 52px; }
.header { min-height:96px; padding:18px clamp(22px,4vw,64px); background:var(--dark); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; color:inherit; text-decoration:none; }
.brand-logo { display:block; width:226px; max-width:58vw; height:auto; }
.status { padding:8px 13px; border:1px solid rgba(255,255,255,.25); border-radius:999px; font-size:12px; }
.status i { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#65b777; }
main { padding:30px clamp(14px,3vw,46px) 58px; }
.hero { width:min(1180px,100%); min-height:560px; margin:0 auto 18px; padding:clamp(34px,5vw,68px); border:1px solid #dfd6ca; border-radius:26px; background:radial-gradient(circle at 94% 95%,rgba(201,154,66,.2) 0,rgba(201,154,66,.05) 24%,transparent 25%),linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,249,239,.94)); box-shadow:0 18px 46px rgba(44,34,24,.09); display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.72fr); gap:clamp(36px,7vw,82px); align-items:center; overflow:hidden; }
.eyebrow { margin:0 0 18px; color:#9e3723; text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:850; }
h1 { margin:0; font-size:clamp(48px,6vw,76px); line-height:.92; letter-spacing:-.055em; font-weight:850; }
h1 em { color:var(--orange); font-style:normal; }
.lead { max-width:720px; margin:27px 0 26px; color:#5d5852; font-size:clamp(17px,1.55vw,20px); line-height:1.55; }
.actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.primary { min-height:54px; padding:0 21px; border-radius:13px; background:var(--orange); color:#fff; display:inline-flex; align-items:center; gap:18px; box-shadow:0 10px 24px rgba(205,60,29,.25); text-decoration:none; font-weight:800; transition:transform .16s ease,background .16s ease; }
.primary:hover { background:#c93b1c; transform:translateY(-2px); }
.primary:focus-visible { outline:3px solid rgba(233,75,37,.25); outline-offset:3px; }
.actions > span { color:#817a72; font-size:12px; }
.quest-note { display:grid; grid-template-columns:38px 1fr; gap:11px; align-items:center; width:min(440px,100%); margin-top:25px; padding:11px 14px 11px 10px; border:1px solid #ead9ba; border-radius:14px; background:rgba(255,253,248,.76); box-shadow:0 8px 18px rgba(67,49,30,.05); }
.quest-note > span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(145deg,#e5bf74,var(--gold)); color:#352818; font-size:21px; }
.quest-note p { margin:0; color:#766754; font-size:12px; line-height:1.35; }
.quest-note strong { color:#3d3328; font-size:13px; }
.info-card { min-height:330px; padding:30px; border-radius:21px; background:var(--dark); color:#fff; box-shadow:0 20px 42px rgba(29,27,24,.2); position:relative; overflow:hidden; }
.info-card::after { content:""; position:absolute; right:-80px; bottom:-100px; width:220px; height:220px; border-radius:50%; background:rgba(201,154,66,.13); }
.card-kicker { margin:0 0 9px; color:#e5bf74; font-size:10px; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.pieces { display:flex; margin-bottom:26px; }
.pieces span { width:44px; height:44px; margin-right:-7px; border:2px solid var(--dark); border-radius:50%; background:#f6eee4; color:var(--dark); display:grid; place-items:center; font-size:24px; }
.pieces span:nth-child(2) { background:var(--orange); color:#fff; }.pieces span:nth-child(3) { background:var(--gold); }
.number { display:inline-block; margin-right:9px; font-size:56px; line-height:1; letter-spacing:-.04em; }
.number-label { color:#d7d1c9; }
.rule { height:1px; margin:20px 0; background:rgba(255,255,255,.14); }
dl { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0; }
dl div { display:flex; flex-direction:column; } dt { font-size:20px; font-weight:800; } dd { margin:1px 0 0; color:#bcb6ae; font-size:11px; }
.info-card > p:not(.card-kicker) { max-width:310px; margin:23px 0 0; color:#c6c0b8; font-size:12px; line-height:1.5; position:relative; z-index:1; }
.topics { width:min(1180px,100%); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.topics article { min-height:120px; padding:20px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.92); display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:center; }
.topics article > span { width:38px; height:38px; border-radius:50%; background:#faeae5; color:#a9331c; display:grid; place-items:center; font-size:10px; font-weight:850; }
.topics strong { font-size:15px; }.topics p { margin:4px 0 0; color:#777067; font-size:12px; }
footer { min-height:88px; padding:24px clamp(22px,4vw,64px); background:var(--dark); color:#aaa59e; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:11px; }
footer a { color:#fff; text-decoration:none; font-weight:750; }
@media(max-width:850px){.hero{grid-template-columns:1fr}.topics{grid-template-columns:1fr}.info-card{min-height:0}}
@media(max-width:560px){.header{min-height:78px}.brand-logo{width:202px}.status{display:none}main{padding:12px 9px 36px}.hero{min-height:0;padding:32px 20px;border-radius:19px}h1{font-size:clamp(44px,14vw,62px)}.lead{font-size:16px}.actions{align-items:flex-start;flex-direction:column}.info-card{padding:23px}.topics article{min-height:100px}footer{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}