.start-page { width: calc(100% - 96px); max-width: 1320px; margin: auto; padding: 28px 0 80px; }
.start-breadcrumbs { display: flex; justify-content: start; gap: 12px; margin: 0 0 25px; font-size: 12px; color: #a699b2; }
.start-breadcrumbs a { font-size: 12px; color: #d1b994; }
.start-breadcrumbs > span:first-of-type { color: #64546f; }
.start-hero { position: relative; isolation: isolate; overflow: clip; min-height: 610px; border-radius: 10px; background: #211b2c; }
.start-art { position: absolute; inset: 0; z-index: -3; background: url('/static/start-dark-elf.webp') center top/cover no-repeat; }
.start-hero:before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(90deg,#15101ef7 2%,#1b1326d9 32%,#1b142766 59%,#1b142608 85%),linear-gradient(0deg,#15101e77,transparent 60%); }
.start-intro { position: relative; max-width: 660px; padding: 72px 60px 64px; }
.start-platform { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #d1b898; margin-bottom: 27px; }
.start-platform .icon { width: 15px; height: 15px; }
.start-intro h1 { font: 600 clamp(38px,3.6vw,53px)/1.12 var(--font-ui); letter-spacing: -.045em; margin: 0 0 23px; color: #f5edf2; }
.start-intro > p { font-size: 16px; line-height: 1.8; color: #ccbed5; margin: 0 0 32px; }
.start-download { min-height: 57px; gap: 15px; font-size: 15px; border-radius: 6px; padding: 16px 23px; background: linear-gradient(145deg,#bd3449,#98263b); box-shadow: 0 10px 35px #07030a44; }
.start-download:hover { background: #c13a4f; }
.start-download .icon { width: 19px; height: 19px; }
.start-download .icon:last-child { margin-left: 24px; }
.start-download-note { display: block; margin: 13px 0 27px; font-size: 11px; color: #a999b8; }
.start-account-link, .start-steps a, .start-help-link { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: #dbc09a; }
.start-account-link .icon, .start-steps a .icon, .start-help-link .icon { width: 16px; height: 16px; transition: transform .2s; }
.start-account-link:hover .icon, .start-steps a:hover .icon, .start-help-link:hover .icon { transform: translateX(4px); }
.start-guide { padding: 65px 0 60px; }
.start-guide-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 35px; }
.start-page h2 { font: 600 29px/1.2 var(--font-ui); letter-spacing: -.035em; margin: 0; }
.start-guide-heading > p { font-size: 14px; max-width: 400px; margin: 0; line-height: 1.8; color: #ad9cba; }
.start-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 42px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.start-steps li { position: relative; counter-increment: step; min-width: 0; }
.start-step-icon { display: flex; align-items: center; gap: 12px; margin-bottom: 23px; color: #c4a480; }
.start-step-icon:before { content: counter(step); display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #b5967714; font-size: 12px; color: #ddc19c; }
.start-step-icon .icon { width: 19px; height: 19px; }
.start-steps h3 { font-size: 17px; font-weight: 500; line-height: 1.5; color: #e1d6e8; margin: 0 0 12px; }
.start-steps p { font-size: 14px; line-height: 1.85; color: #b4a3c0; margin: 0 0 17px; }
.start-help { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; border-top: 1px solid #b49ac21c; padding-top: 50px; }
.start-help > div > p { font-size: 14px; line-height: 1.85; color: #ad9aba; max-width: 340px; margin: 20px 0; }
.start-questions details { border-bottom: 1px solid #b49ac221; }
.start-questions summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; font-size: 14px; line-height: 1.6; color: #d0bedb; padding: 17px 0; list-style: none; }
.start-questions summary::-webkit-details-marker { display: none; }
.start-questions summary .icon { width: 16px; height: 16px; flex-shrink: 0; color: #c1a57f; transition: transform .2s; }
.start-questions details[open] summary .icon { transform: rotate(180deg); }
.start-questions details[open] summary { color: #e1c29b; }
.start-questions p { font-size: 13px; line-height: 1.85; color: #b3a0c1; margin: 0 0 18px; padding-right: 25px; }
@media(max-width:1100px) {
 .start-intro { padding: 65px 38px 55px; max-width: 600px; }
 .start-hero { min-height: 590px; }
 .start-steps { gap: 28px; }
 .start-help { gap: 50px; }
}
@media(max-width:760px) {
 .start-page { width: calc(100% - 36px); padding: 20px 0 55px; }
 .start-breadcrumbs { margin-bottom: 19px; }
 .start-hero { min-height: 660px; border-radius: 8px; }
 .start-art { background-position: 88% top; }
 .start-hero:before { background: linear-gradient(0deg,#15101e 3%,#15101ee8 46%,#15101e44 80%,transparent),linear-gradient(90deg,#1b132655,transparent); }
 .start-intro { max-width: none; padding: 245px 23px 30px; }
 .start-platform { font-size: 11px; margin-bottom: 20px; }
 .start-intro h1 { font-size: 34px; line-height: 1.15; margin-bottom: 18px; }
 .start-intro > p { font-size: 14px; margin-bottom: 24px; }
 .desktop-break { display: none; }
 .start-download { width: 100%; font-size: 13px; padding: 15px; min-height: 54px; gap: 10px; }
 .start-download .icon:last-child { margin-left: auto; }
 .start-download-note { font-size: 10px; margin-top: 11px; margin-bottom: 23px; }
 .start-account-link { font-size: 12px; }
 .start-guide { padding: 40px 0; }
 .start-page h2 { font-size: 26px; }
 .start-guide-heading { display: block; margin-bottom: 30px; }
 .start-guide-heading > p { font-size: 13px; margin: 15px 0 0; }
 .start-steps { grid-template-columns: 1fr; gap: 29px; }
 .start-step-icon { margin-bottom: 13px; }
 .start-steps h3 { font-size: 16px; margin-bottom: 10px; }
 .start-steps p { font-size: 14px; margin-bottom: 11px; }
 .start-help { grid-template-columns: 1fr; gap: 23px; padding-top: 35px; }
 .start-help > div > p { margin: 15px 0; }
 .start-questions summary { font-size: 13px; }
}