.start-page {
    --start-accent: #ffb340;
    --start-line: #ffffff1c;
    overflow: clip;
    background: #101210;
}

.start-page h1,
.start-page h2,
.start-page h3,
.start-page p { margin: 0; }
.start-page h2 { font-size: clamp(30px, 3.3vw, 48px); line-height: 1.18; letter-spacing: -.045em; }
.start-page h2 em { color: var(--start-accent); font-style: normal; }
.start-page h3 { font-size: 20px; line-height: 1.4; letter-spacing: -.025em; }
.start-page__section { max-width: 1440px; margin: auto; padding: 100px max(4vw, 24px); }
.start-page .start-page__eyebrow { color: var(--start-accent); font-size: 10px; font-weight: 700; letter-spacing: .16em; line-height: 1.7; margin-bottom: 26px; }
.start-page__hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; min-height: 740px; min-height: min(850px, calc(100svh - 90px)); background: #252a20 url('../img/start-shore.jpg') 65% center / cover; }
.start-page__hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #0b100feb 0%, #0b100f9c 48%, #0b100f0d 100%), linear-gradient(0deg, #101210 0%, transparent 34%, #10121030 100%); }
.start-page__hero::after { content: ''; position: absolute; inset: 24px; border: 1px solid #ffffff12; pointer-events: none; z-index: -1; }
.start-page__hero-content { width: 100%; max-width: 1440px; margin: auto; padding: 100px max(4vw, 24px) 60px; }
.start-page__hero .start-page__eyebrow { display: flex; align-items: center; gap: 12px; }
.start-page__signal { width: 6px; height: 6px; border-radius: 50%; background: var(--start-accent); box-shadow: 0 0 20px #ffb34080; }
.start-page h1 { font-size: clamp(40px, 5.1vw, 76px); font-weight: 700; letter-spacing: -.06em; line-height: 1.07; max-width: 1050px; }
.start-page h1 span { color: var(--start-accent); }
.start-page .start-page__hero-text { color: #d0d3c9; font-size: 16px; line-height: 1.85; max-width: 550px; margin: 28px 0 32px; }
.start-page__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.start-page .button { min-height: 54px; gap: 22px; padding: 15px 24px; border-radius: 4px; font-size: 13px; }
.start-page .button.primary { background: var(--start-accent); color: #171b13; border-color: var(--start-accent); }
.start-page .button.primary:hover { background: #ffc76d; border-color: #ffc76d; }
.start-page .button.glass { background: #ffffff07; border-color: #ffffff38; }
.start-page__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 800px; padding: 0; margin: 34px 0 0; list-style: none; }
.start-page__facts li { display: grid; grid-template-columns: 32px 1fr; align-content: start; column-gap: 12px; row-gap: 8px; padding: 22px 18px; border: 1px solid #ffb3404d; border-top: 2px solid var(--start-accent); border-radius: 5px; background: #141b12eb; box-shadow: 0 8px 24px #00000024; }
.start-page__fact-icon { grid-row: span 2; color: var(--start-accent); padding-top: 1px; }
.start-page__facts strong { color: #fff3db; font-size: 13px; line-height: 1.5; }
.start-page__facts li > span:last-child { color: #b8c1ac; font-size: 11px; line-height: 1.65; }
.start-page__hero-footer { display: flex; align-items: center; gap: 24px; width: 100%; max-width: 1440px; margin: 0 auto; padding: 25px max(4vw, 24px); color: #929c8e; font-size: 10px; letter-spacing: .1em; }
.start-page__hero-footer p { margin-left: auto; font-size: 11px; letter-spacing: 0; }
.start-page__promo { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 36px; max-width: 1440px; margin: auto; padding: 38px max(4vw, 24px); border-bottom: 1px solid #ffb34033; background: linear-gradient(110deg, #ffb3400c, transparent 70%); }
.start-page__promo .start-page__eyebrow { margin-bottom: 8px; }
.start-page__promo h2 { font-size: 24px; line-height: 1.3; letter-spacing: -.035em; }
.start-page__promo-copy > p:last-child { max-width: 560px; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.start-page__promo-ticket { display: grid; place-items: center; gap: 4px; min-width: 170px; padding: 18px 28px; border: 1px dashed #ffb34080; border-radius: 6px; background: #ffb3400a; color: var(--start-accent); transform: rotate(-3deg); }
.start-page__promo-ticket > span { font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.start-page__promo-ticket strong { font-family: Consolas, monospace; font-size: 34px; letter-spacing: .13em; line-height: 1.3; }
.start-page__section-head { display: grid; grid-template-columns: 1.15fr 1fr; align-items: end; gap: 60px; margin-bottom: 48px; }
.start-page__section-head > p { max-width: 460px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.start-page__benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--start-line); border-bottom: 1px solid var(--start-line); }
.start-page__benefit { position: relative; padding: 34px 30px 38px; }
.start-page__benefit:first-child { padding-left: 0; }
.start-page__benefit + .start-page__benefit { border-left: 1px solid var(--start-line); }
.start-page__number { display: block; color: #74806a; font-size: 13px; letter-spacing: .14em; margin-bottom: 28px; }
.start-page__benefit p { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.85; }
.start-page__fair { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 28px; margin-top: 28px; border: 1px solid #ffb34024; background: #ffb34005; border-radius: 4px; }
.start-page__fair-symbol { font-size: 42px; line-height: 1; color: var(--start-accent); }
.start-page__fair .start-page__eyebrow { font-size: 9px; margin-bottom: 7px; }
.start-page__fair h3 { font-size: 16px; }
.start-page__fair p:not(.start-page__eyebrow) { max-width: 760px; color: var(--muted); font-size: 12px; margin-top: 8px; }
.start-page__text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--start-accent); font-size: 12px; }
.start-page__text-link:hover { color: #ffe2ae; }
.start-page__guide { background: #181c16; border-block: 1px solid var(--start-line); }
.start-page__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; list-style: none; padding: 0; margin: 48px 0; }
.start-page__steps li { position: relative; padding-top: 28px; border-top: 1px solid #7c8b693d; }
.start-page__steps li::before { position: absolute; content: ''; width: 7px; height: 7px; background: var(--start-accent); top: -4px; left: 0; }
.start-page__step-number { display: block; font-size: 50px; font-weight: 700; line-height: 1; letter-spacing: -.07em; color: #6f7d5c; margin-bottom: 22px; }
.start-page__steps p { color: #b1baa6; font-size: 13px; margin-top: 12px; line-height: 1.85; }
.start-page__keys { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 22px; color: #77836b; font-size: 12px; }
.start-page kbd { display: inline-block; padding: 3px 9px; background: #ffffff06; border: 1px solid #ffffff24; border-bottom-width: 3px; border-radius: 4px; color: #cfd5c5; font-size: 11px; font-family: inherit; }
.start-page__field-note { display: flex; gap: 24px; align-items: center; border-top: 1px dashed #7c8b694d; padding-top: 30px; }
.start-page__field-mark { color: var(--start-accent); font-size: 64px; line-height: 1; }
.start-page__field-note .start-page__eyebrow { margin-bottom: 5px; font-size: 9px; }
.start-page__field-note h3 { font-size: 17px; }
.start-page__field-note p:not(.start-page__eyebrow) { color: #b1baa6; font-size: 12px; margin-top: 8px; max-width: 820px; }
.start-page__servers { display: grid; gap: 16px; }
.start-page__server { min-width: 0; padding: 28px; border: 1px solid var(--start-line); background: linear-gradient(110deg, #1f251a80, #161815); border-radius: 4px; }
.start-page__server-heading { display: flex; align-items: center; gap: 24px; }
.start-page__server-index { font-size: 40px; line-height: 1; color: #637055; font-weight: 700; letter-spacing: -.06em; }
.start-page__server-tags { display: flex; gap: 10px; color: #9da98c; font-size: 10px; letter-spacing: .1em; margin-bottom: 5px; }
.start-page__server-tags span:first-child { color: var(--start-accent); }
.start-page__server h3 { font-size: 22px; overflow-wrap: anywhere; }
.start-page__server-status { margin-left: auto; display: flex; flex-shrink: 0; align-items: center; gap: 8px; font-size: 11px; color: #a9b09f; }
.start-page__server-status i { width: 6px; height: 6px; border-radius: 50%; background: #92968d; }
.start-page__server-status--online i { background: #a2cb75; box-shadow: 0 0 12px #a2cb7533; }
.start-page .start-page__server-description { color: var(--muted); font-size: 13px; line-height: 1.8; margin-top: 18px; overflow-wrap: anywhere; }
.start-page .start-page__server-connect { display: flex; align-items: center; gap: 16px; justify-content: space-between; margin-top: 24px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--start-line); background: none; border-radius: 0; }
.start-page__server-connect code { min-width: 0; color: #c8cfbe; font-size: 13px; overflow-wrap: anywhere; white-space: normal; }
.start-page .start-page__copy { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; color: var(--start-accent); background: none; border: 0; padding: 8px 0; font-size: 12px; }
.start-page .start-page__copy:hover { color: #ffe2ae; }
.start-page .start-page__connect-note { margin-top: 24px; color: #939e88; font-size: 11px; text-align: center; }
.start-page__connect-note kbd { margin-right: 8px; }
.start-page__empty { padding: 30px; border: 1px solid var(--start-line); color: var(--muted); font-size: 14px; }
.start-page__empty a { margin-top: 15px; }
.start-page__faq { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; padding-top: 20px; }
.start-page__faq > div > .start-page__text-link { margin-top: 28px; }
.start-page__question { border-bottom: 1px solid var(--start-line); }
.start-page__question:first-child { border-top: 1px solid var(--start-line); }
.start-page__question summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; list-style: none; cursor: pointer; font-size: 14px; line-height: 1.6; font-weight: 700; }
.start-page__question summary::-webkit-details-marker { display: none; }
.start-page__question summary span { font-size: 22px; font-weight: 400; color: var(--start-accent); }
.start-page__question[open] summary span { transform: rotate(45deg); }
.start-page__question > p { color: var(--muted); font-size: 13px; line-height: 1.85; padding: 0 32px 24px 0; }
.start-page__question summary:focus-visible { outline: 2px solid var(--start-accent); outline-offset: 4px; }
.start-page__outro { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid #ffb3402e; background: radial-gradient(ellipse at 80% 90%, #a0731726, transparent 60%), #1a1e15; }
.start-page__outro-inner { max-width: 1440px; margin: auto; padding: 80px max(4vw, 24px); }
.start-page__outro h2 { max-width: 750px; }
.start-page__outro-inner > p:not(.start-page__eyebrow) { color: #b6bfaa; font-size: 14px; max-width: 580px; margin: 24px 0 30px; }
.start-page__outro-mark { position: absolute; z-index: -1; right: -14px; bottom: -55px; font-size: clamp(140px, 19vw, 280px); font-weight: 700; letter-spacing: -.08em; line-height: .8; color: #ffb34008; transform: rotate(-9deg); pointer-events: none; }

@media (min-width: 1600px) {
    .start-page__hero-content { padding-top: 120px; padding-bottom: 100px; }
}

@media (max-width: 900px) {
    .start-page__section { padding-top: 70px; padding-bottom: 70px; }
    .start-page__hero { min-height: 700px; }
    .start-page__hero-content { padding-top: 100px; }
    .start-page__section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
    .start-page__section-head > p { max-width: 600px; }
    .start-page__benefit { padding: 24px 20px; }
    .start-page h3 { font-size: 17px; }
    .start-page__fair { grid-template-columns: auto 1fr; }
    .start-page__fair > a { grid-column: 2; }
    .start-page__steps { gap: 24px; }
    .start-page__faq { grid-template-columns: 1fr; gap: 35px; padding-top: 0; }
    .start-page__server-status { max-width: 180px; font-size: 10px; }
    .start-page__promo { grid-template-columns: 1fr auto; gap: 24px; }
    .start-page__promo > a { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 600px) {
    .start-page__hero { min-height: 650px; }
    .start-page__hero::after { inset: 12px; }
    .start-page__hero-content { padding: 65px 24px 36px; }
    .start-page__hero-shade { background: linear-gradient(90deg, #0b100fd9, #0b100f80), linear-gradient(0deg, #101210, transparent 70%); }
    .start-page h1 { font-size: clamp(36px, 8.7vw, 52px); }
    .start-page .start-page__hero-text { font-size: 14px; margin-top: 22px; }
    .start-page .start-page__eyebrow { font-size: 9px; letter-spacing: .1em; margin-bottom: 20px; }
    .start-page__actions { gap: 14px; }
    .start-page .button { justify-content: center; padding: 14px 18px; gap: 16px; }
    .start-page__hero .button { width: 100%; }
    .start-page__facts { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
    .start-page__facts li { padding: 15px 18px; grid-template-columns: 28px 1fr; row-gap: 3px; }
    .start-page__facts strong { font-size: 13px; }
    .start-page__fact-icon { align-self: center; }
    .start-page__hero-footer { padding: 12px 24px 24px; font-size: 8px; }
    .start-page__hero-footer p { display: none; }
    .start-page__promo { padding: 32px 24px; grid-template-columns: 1fr; }
    .start-page__promo h2 { font-size: 24px; }
    .start-page__promo-ticket { justify-self: start; min-width: 200px; }
    .start-page__promo > a { grid-column: auto; width: 100%; }
    .start-page__section { padding: 56px 24px; }
    .start-page__benefits { grid-template-columns: 1fr; }
    .start-page__benefit, .start-page__benefit:first-child { padding: 25px 0; }
    .start-page__benefit + .start-page__benefit { border-left: 0; border-top: 1px solid var(--start-line); }
    .start-page__number { margin-bottom: 12px; font-size: 11px; }
    .start-page__fair { padding: 22px; gap: 16px; }
    .start-page__fair-symbol { display: none; }
    .start-page__fair, .start-page__fair > a { display: block; }
    .start-page__fair > a { display: inline-flex; margin-top: 18px; }
    .start-page__steps { grid-template-columns: 1fr; gap: 30px; margin: 36px 0; }
    .start-page__steps li { padding-left: 56px; padding-top: 20px; }
    .start-page__step-number { position: absolute; left: 0; top: 25px; font-size: 30px; }
    .start-page__field-note { align-items: start; gap: 14px; }
    .start-page__field-mark { font-size: 36px; }
    .start-page__server { padding: 22px 18px; }
    .start-page__server-heading { flex-wrap: wrap; gap: 14px; }
    .start-page__server-heading > div { flex: 1; min-width: 0; }
    .start-page__server-index { font-size: 32px; }
    .start-page__server h3 { font-size: 18px; }
    .start-page__server-status { margin-left: 0; flex-basis: 100%; max-width: none; }
    .start-page .start-page__server-connect { flex-direction: column; align-items: start; gap: 12px; }
    .start-page .start-page__copy { justify-content: space-between; width: 100%; }
    .start-page__faq { padding-top: 0; }
    .start-page__question summary { font-size: 13px; }
    .start-page__outro-inner { padding: 56px 24px; }
    .start-page__outro .start-page__text-link { padding-block: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    html:has(.start-page) { scroll-behavior: auto; }
    .start-page *, .start-page *::before, .start-page *::after { transition: none; }
}