:root {
    --bg: #080b0d;
    --surface: #101519;
    --surface-2: #151c21;
    --line: rgba(219, 174, 82, .18);
    --gold: #dbae52;
    --gold-light: #f2d28a;
    --text: #f1eee6;
    --muted: #9ba4a9;
    --danger: #ff8b7d;
    --success: #81d69c;
    --radius: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 75% 5%, rgba(108, 77, 31, .22), transparent 28rem), linear-gradient(160deg, #0b1013 0%, var(--bg) 55%); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
a { color: inherit; }
.site-header { width: min(1180px, calc(100% - 40px)); min-height: 88px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.brand-mark { width: 43px; height: 48px; display: grid; place-items: center; color: #161006; background: linear-gradient(145deg, var(--gold-light), #a67326); clip-path: polygon(50% 0, 100% 20%, 90% 78%, 50% 100%, 10% 78%, 0 20%); font-family: Georgia, serif; font-size: 27px; font-weight: 800; }
.brand strong { display: block; font-family: Georgia, serif; font-size: 23px; letter-spacing: .06em; }
.brand small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
nav { display: flex; align-items: center; gap: 28px; }
nav a { position: relative; padding: 32px 0; color: #b6bdc0; font-size: 14px; font-weight: 650; text-decoration: none; }
nav a:hover, nav a.active { color: var(--gold-light); }
nav a.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--gold); box-shadow: 0 0 14px var(--gold); }
main { position: relative; width: min(1180px, calc(100% - 40px)); min-height: calc(100vh - 210px); margin: 0 auto; padding: 70px 0 90px; }
.hero { position: relative; min-height: 510px; display: flex; flex-direction: column; justify-content: center; max-width: 840px; }
.hero::after { content: "T"; position: absolute; z-index: -1; left: 76%; top: 43%; color: transparent; -webkit-text-stroke: 1px rgba(219,174,82,.12); transform: translate(-50%,-50%); font: 720px/.7 Georgia, serif; }
.eyebrow { margin-bottom: 16px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; }
.hero h1 { max-width: 800px; margin: 0; font-size: clamp(52px, 7.3vw, 96px); font-weight: 500; line-height: .98; letter-spacing: -.045em; }
.hero h1 span { color: var(--gold-light); }
.hero > p { max-width: 640px; margin: 27px 0 0; color: #b6bdc0; font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; gap: 13px; margin-top: 35px; }
.button { min-height: 49px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 2px; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.button-primary { color: #151006; background: linear-gradient(135deg, var(--gold-light), #bd8734); box-shadow: 0 12px 30px rgba(169,111,31,.15); }
.button-primary:hover { filter: brightness(1.08); }
.button-secondary { color: var(--gold-light); border-color: rgba(219,174,82,.4); background: rgba(13,17,20,.75); }
.button-disabled { color: #6e767a; border-color: #283036; cursor: not-allowed; }
.button-wide { width: 100%; margin-top: 8px; }
.runes { position: absolute; right: 0; bottom: 35px; display: flex; gap: 20px; color: rgba(219,174,82,.28); font-size: 22px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.feature-card { padding: 34px; background: rgba(15,20,24,.92); }
.feature-number { color: var(--gold); font: 700 12px/1 ui-monospace, monospace; letter-spacing: .12em; }
.feature-card h2 { margin: 22px 0 10px; font-size: 25px; }
.feature-card p { min-height: 52px; color: var(--muted); line-height: 1.6; }
.feature-card a { color: var(--gold-light); font-size: 13px; font-weight: 700; text-decoration: none; }
.page-heading { margin-bottom: 37px; }
.page-heading h1 { margin: 0 0 12px; font-size: clamp(42px, 6vw, 68px); font-weight: 500; letter-spacing: -.03em; }
.page-heading p { margin: 0; color: var(--muted); font-size: 17px; }
.panel { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(20,27,32,.97), rgba(13,18,21,.97)); box-shadow: 0 30px 90px rgba(0,0,0,.16); }
.form-panel { max-width: 700px; padding: 38px; }
.field { margin-bottom: 21px; }
.field label, .search-panel label { display: block; margin-bottom: 9px; color: #d9dcda; font-size: 13px; font-weight: 700; }
.field label span { color: var(--muted); font-weight: 400; }
input { width: 100%; height: 50px; padding: 0 15px; color: var(--text); border: 1px solid #2b353a; border-radius: 2px; outline: 0; background: #0b1013; font: inherit; }
input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(219,174,82,.1); }
.field small { display: block; margin-top: 7px; color: #758086; font-size: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.checkbox { display: flex; align-items: flex-start; gap: 11px; margin: 5px 0 23px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.checkbox input { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--gold); }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.alert { margin-bottom: 24px; padding: 16px 19px; border-left: 3px solid; background: var(--surface); }
.alert p { margin: 4px 0; }
.alert-error { color: #ffd0ca; border-color: var(--danger); }
.alert-success { color: #c8f2d5; border-color: var(--success); }
.download-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; padding: 38px; }
.download-icon { width: 78px; height: 78px; display: grid; place-items: center; color: var(--gold-light); border: 1px solid var(--line); border-radius: 50%; font: 38px Georgia, serif; }
.download-card h2 { margin: 0 0 8px; font-size: 29px; }
.download-card p, .download-card li { color: var(--muted); line-height: 1.6; }
.download-card ul { margin: 15px 0 0; padding-left: 18px; }
.tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.tabs a { padding: 11px 17px; color: var(--muted); border: 1px solid #273036; text-decoration: none; font-size: 13px; font-weight: 700; }
.tabs a.active { color: #161006; border-color: var(--gold); background: var(--gold); }
.table-panel { overflow: hidden; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 15px 18px; color: #7f898e; border-bottom: 1px solid var(--line); background: rgba(5,8,10,.3); font-size: 11px; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
td { padding: 17px 18px; color: #c5cbcd; border-bottom: 1px solid rgba(255,255,255,.045); font-size: 14px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(219,174,82,.035); }
td strong { color: var(--text); }
.rank { width: 54px; color: var(--gold); font-family: Georgia, serif; font-size: 18px; }
.level { display: inline-grid; min-width: 35px; height: 30px; padding: 0 7px; place-items: center; color: var(--gold-light); border: 1px solid var(--line); }
.empty { padding: 34px; color: var(--muted); text-align: center; }
.search-panel { max-width: 700px; padding: 30px; }
.search-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.results-grid { max-width: 700px; margin-top: 15px; display: grid; gap: 10px; }
.result-card { padding: 23px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.result-card span { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.result-card h2 { margin: 4px 0 0; font-size: 23px; }
.result-card > strong { color: var(--gold-light); font-family: Georgia, serif; font-size: 21px; }
footer { width: min(1180px, calc(100% - 40px)); min-height: 120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 25px; color: #687176; border-top: 1px solid var(--line); font-size: 12px; }
footer strong { display: block; color: #b3b9bb; font-family: Georgia, serif; font-size: 18px; }
footer span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 820px) {
    .site-header { padding: 18px 0; align-items: flex-start; flex-direction: column; }
    nav { width: 100%; gap: 20px; overflow-x: auto; }
    nav a { padding: 11px 0; white-space: nowrap; }
    .hero { min-height: 500px; }
    .feature-grid { grid-template-columns: 1fr; }
    .feature-card p { min-height: auto; }
    .download-card { grid-template-columns: auto 1fr; }
    .download-card .button { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .site-header, main, footer { width: min(100% - 26px, 1180px); }
    main { padding: 50px 0 70px; }
    .hero h1 { font-size: 48px; }
    .hero-actions, footer { align-items: stretch; flex-direction: column; }
    .form-panel { padding: 23px; }
    .form-row, .search-row { grid-template-columns: 1fr; }
    .download-card { padding: 25px; grid-template-columns: 1fr; }
    .result-card { align-items: flex-start; flex-direction: column; }
    footer { padding: 28px 0; }
}