/* Падел Форум 2027. Главный образ — живой корт на первом экране; остальное собрано из языка корта:
   линии разметки, стекло, сетка, мяч. Гамма «Корт», шрифты Dela Gothic One + Golos Text. */
:root {
  --night: #0A1633; --deep: #071027; --turf: #1C4FA8; --turf2: #163F8C; --outer: #0F2C66; --racket: #3D7BEA;
  --ball: #D9F24B; --glass: #F2F5F9; --paper: #E6ECF5; --net: #8EA3C7; --soft: #C3D0E8; --ink2: #3A4C74;
  --line: rgba(242, 245, 249, .14);
  --display: "Dela Gothic One", "Arial Black", system-ui, sans-serif;
  --body: "Golos Text", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --wrap: 1240px; --gut: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--night); color: var(--glass); font: 18px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden }
img, svg, canvas { display: block; max-width: 100% }
a { color: inherit }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.02; text-wrap: balance }
p { margin: 0 }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut) }
:focus-visible { outline: 3px solid var(--ball); outline-offset: 3px; border-radius: 8px }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { animation: none !important; transition: none !important } }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; border-radius: 999px; border: 2px solid transparent;
  font: 700 17px/1 var(--body); text-decoration: none; cursor: pointer; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .2s }
.btn:hover { transform: translateY(-2px) scale(1.02) }
.btn:active { transform: scale(.97) }
.btn-ball { background: var(--ball); color: var(--night); box-shadow: 0 10px 30px rgba(217, 242, 75, .25) }
.btn-ghost { border-color: rgba(242, 245, 249, .4); color: var(--glass) }
.btn-ghost:hover { border-color: var(--glass); background: rgba(242, 245, 249, .06) }
.btn-night { background: var(--night); color: var(--glass) }

/* ——— Шапка ——— */
.top { position: fixed; z-index: 40; left: 0; right: 0; top: 0; padding-top: env(safe-area-inset-top, 0px); transition: background .3s, border-color .3s; border-bottom: 1px solid transparent }
.top.solid { background: rgba(7, 16, 39, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line) }
.top .wrap { display: flex; align-items: center; gap: 28px; min-height: 72px }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap }
.logo img { width: 38px; height: 38px }
.logo b { font: 400 16px/1 var(--display) }
.logo b span { color: var(--ball) }
.nav { display: flex; gap: 24px; margin-left: auto; font-size: 15px; font-weight: 500 }
.nav a { text-decoration: none; color: var(--soft); transition: color .2s }
.nav a:hover { color: var(--glass) }
.top .btn { min-height: 44px; padding: 0 22px; font-size: 15px; box-shadow: none }
@media (max-width: 980px) { .nav { display: none } .top .btn { margin-left: auto } }
@media (max-width: 760px) { .top .btn { display: none } }

/* ——— Первый экран: корт ——— */
.hero { position: relative; background: radial-gradient(120% 90% at 50% 40%, #13367A 0%, var(--outer) 45%, var(--deep) 100%); padding: calc(88px + env(safe-area-inset-top, 0px)) var(--gut) 0; overflow: hidden }
.arena { container-type: inline-size; position: relative; max-width: 1360px; margin: 0 auto; aspect-ratio: 2.05 / 1; max-height: calc(100svh - 250px); min-height: 420px }
.arena canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.title { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; pointer-events: none }
.title span { font: 400 7.2cqw/.9 var(--display); letter-spacing: -.01em; text-align: center; color: var(--glass); text-shadow: 0 6px 30px rgba(7, 16, 39, .45);
  opacity: 0; transform: translateY(18px); animation: rise .9s cubic-bezier(.2, .8, .2, 1) forwards }
.title span:nth-child(2) { animation-delay: .12s }
.title .year { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); font: 400 max(20px, 2.6cqw)/1 var(--display);
  background: var(--ball); color: var(--night); padding: .16em .42em; border-radius: .22em; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); opacity: 0; animation: pop .6s .55s cubic-bezier(.3, 1.6, .5, 1) forwards }
@keyframes rise { to { opacity: 1; transform: none } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(.4) } to { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1) } }
.hero-bar { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr auto auto; gap: 28px 40px; align-items: center; padding: 30px 0 40px }
.hero-bar .lead { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.35; font-weight: 500; color: var(--soft); max-width: 30ch }
.hero-bar .lead b { color: var(--glass); font-weight: 600 }
.when { display: grid; gap: 4px; font-size: 16px; color: var(--soft); white-space: nowrap }
.when b { font: 400 22px/1.15 var(--display); color: var(--glass) }
.hero-cta { display: grid; gap: 10px; justify-items: start }
.hero-cta small { font-size: 14px; color: var(--soft) }
.hero-cta small b { color: var(--ball) }
@media (max-width: 1020px) { .hero-bar { grid-template-columns: 1fr 1fr } .hero-bar .lead { grid-column: 1 / -1 } }
@media (max-width: 700px) {
  .arena { aspect-ratio: .62; max-height: none; min-height: 0 }
  .title { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr }
  .title span { font-size: 14.5cqw }
  .title .year { font-size: 6cqw }
  .hero-bar { grid-template-columns: 1fr; gap: 24px; padding-top: 26px }
}

/* ——— Общие секции ——— */
section { position: relative }
.sec { padding-block: clamp(80px, 11vw, 150px) }
.h2 { font-size: clamp(40px, 6vw, 84px) }
.sub { font-size: clamp(18px, 1.6vw, 21px); color: var(--soft); max-width: 46ch; margin-top: 22px }

/* ——— Вопросы ——— */
.ask { background: var(--deep) }
.ask .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: start }
.ask .head { position: sticky; top: 120px }
.qlist { border-top: 2px solid var(--line) }
.qi { border-bottom: 2px solid var(--line) }
.qi button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 44px 1fr 28px; gap: 18px; align-items: center; padding: 26px 0 }
.qi button:focus-visible { outline: 3px solid var(--ball); outline-offset: 4px; border-radius: 8px }
.qi .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--net); transition: all .35s cubic-bezier(.3, 1.6, .5, 1) }
.qi h3 { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.12; transition: color .2s }
.qi .pm { font: 400 26px/1 var(--display); color: var(--net); transition: transform .3s }
.qi .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease }
.qi .ans > div { overflow: hidden }
.qi .ans p { padding: 0 0 28px 62px; color: var(--soft); max-width: 60ch }
.qi.open .ans { grid-template-rows: 1fr }
.qi.open .dot { background: var(--ball); border-color: var(--ball); box-shadow: 0 0 24px rgba(217, 242, 75, .55); transform: scale(1.15) }
.qi.open .pm { transform: rotate(45deg); color: var(--ball) }
.qi button:hover h3 { color: var(--ball) }
@media (max-width: 900px) { .ask .wrap { grid-template-columns: 1fr } .ask .head { position: static } .qi button { grid-template-columns: 34px 1fr 24px } .qi .ans p { padding-left: 52px } }

/* ——— Для кого: три зоны корта ——— */
.who { background: var(--turf); overflow: hidden }
.who .grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(48px, 6vw, 80px); border: 4px solid rgba(242, 245, 249, .9) }
.who .zone { padding: clamp(28px, 3.4vw, 48px); display: grid; gap: 18px; align-content: start; min-height: 340px; position: relative }
.who .zone + .zone { border-left: 4px solid rgba(242, 245, 249, .9) }
.who .zone h3 { font-size: clamp(26px, 2.6vw, 36px) }
.who .zone p { color: var(--soft) }
.who .zone .k { font-weight: 700; font-size: 15px; color: var(--ball) }
.who .zone:first-child { background: linear-gradient(180deg, rgba(217, 242, 75, .12), transparent 70%) }
@media (max-width: 880px) { .who .grid { grid-template-columns: 1fr } .who .zone + .zone { border-left: 0; border-top: 4px solid rgba(242, 245, 249, .9) } .who .zone { min-height: 0 } }

/* ——— Программа: дорожка дня ——— */
.day .track { position: relative; margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 }
.day .track::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 4px; background: rgba(242, 245, 249, .85) }
.day .times { display: flex; justify-content: space-between; font: 400 20px/1 var(--display); color: var(--net); margin-top: clamp(40px, 5vw, 64px) }
.day .stop { position: relative; padding-right: 22px; display: grid; gap: 14px; align-content: start }
.day .stop i { width: 30px; height: 30px; border-radius: 50%; background: var(--night); border: 4px solid var(--glass); position: relative; z-index: 1 }
.day .stop:last-child i { background: var(--ball); border-color: var(--ball) }
.day .stop h3 { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.12; margin-top: 10px }
.day .stop p { font-size: 16px; color: var(--soft) }
@media (max-width: 900px) {
  .day .track { grid-template-columns: 1fr; gap: 28px; padding-left: 0 }
  .day .track::before { left: 13px; right: auto; top: 0; bottom: 0; width: 4px; height: auto }
  .day .stop { grid-template-columns: 30px 1fr; column-gap: 22px; padding: 0 }
  .day .stop i { grid-row: span 2 }
  .day .stop h3 { margin-top: 2px }
  .day .times { display: none }
}

/* ——— Спикеры ——— */
.spk { background: var(--deep) }
.spk .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(40px, 5vw, 64px) }
.spk .ph { aspect-ratio: 3 / 4; border-radius: 26px; position: relative; overflow: hidden; background: linear-gradient(160deg, #16357A, #0B1A3D 70%); display: grid; align-content: end; padding: 24px }
.spk .ph::before { content: ""; position: absolute; inset: 14% 22% 34%; border-radius: 50% 50% 46% 46%; background: rgba(142, 163, 199, .14) }
.spk .ph::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -6%; height: 34%; border-radius: 50% 50% 0 0; background: rgba(142, 163, 199, .12) }
.spk .ph b { position: relative; z-index: 1; font: 400 22px/1.1 var(--display) }
.spk .ph span { position: relative; z-index: 1; font-size: 15px; color: var(--net); margin-top: 6px }
@media (max-width: 880px) { .spk .row { grid-template-columns: 1fr 1fr } }

/* ——— Билеты ——— */
.tix { background: var(--glass); color: var(--night); color-scheme: light }
.tix .sub { color: var(--ink2) }
.tickets { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: clamp(48px, 6vw, 80px) }
.ticket { --bg: #FFFFFF; --fg: var(--night); --mut: var(--ink2); --acc: var(--turf); display: grid; grid-template-columns: 1fr 236px; background: var(--bg); color: var(--fg); border-radius: 22px; position: relative;
  box-shadow: 0 1px 0 rgba(10, 22, 51, .06), 0 20px 40px -24px rgba(10, 22, 51, .25); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1) }
.ticket:hover { transform: translateY(-4px) rotate(-.4deg) }
.ticket::before, .ticket::after { content: ""; position: absolute; right: 224px; width: 24px; height: 24px; border-radius: 50%; background: var(--glass) }
.ticket::before { top: -12px } .ticket::after { bottom: -12px }
.ticket .main { padding: 30px 30px 30px 32px; display: grid; gap: 14px; align-content: start }
.ticket h3 { font-size: 30px }
.ticket ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 16px; color: var(--mut) }
.ticket li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); margin-right: 10px; vertical-align: 2px }
.ticket .stub { border-left: 3px dashed rgba(58, 76, 116, .25); padding: 28px 22px; display: grid; gap: 10px; align-content: space-between; justify-items: start }
.ticket .price { white-space: nowrap; font: 400 30px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--acc) }
.ticket .note { font-size: 14px; font-weight: 600; color: var(--mut) }
.ticket .btn { width: 100%; min-height: 48px; padding: 0 12px; font-size: 15px; box-shadow: none }
.ticket.biz { --bg: var(--night); --fg: var(--glass); --mut: var(--soft); --acc: var(--ball) }
.ticket.biz .stub { border-left-color: rgba(242, 245, 249, .22) }
.ticket .flag { position: absolute; top: -14px; left: 28px; background: var(--ball); color: var(--night); font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 999px; transform: rotate(-3deg) }
.ticket.over { opacity: .45; pointer-events: none }
.tix .fine { margin-top: 26px; font-size: 15px; color: var(--ink2) }
@media (max-width: 980px) { .tickets { grid-template-columns: 1fr } }
@media (max-width: 520px) { .ticket { grid-template-columns: 1fr } .ticket::before, .ticket::after { display: none } .ticket .stub { border-left: 0; border-top: 3px dashed rgba(58, 76, 116, .25); grid-template-columns: 1fr auto; align-items: center } .ticket .stub .btn { grid-column: 1 / -1 } }

/* ——— Площадка ——— */
.venue .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 5vw, 72px); align-items: end }
.venue { overflow: clip }
.venue .wrap > * { min-width: 0 }
.venue .big { font: 400 clamp(96px, 15vw, 230px)/.82 var(--display); color: var(--glass); letter-spacing: -.02em }
.venue .addr { margin-top: 56px; font-size: 20px; color: var(--soft); max-width: 36ch }
.hotel { background: var(--ball); color: var(--night); border-radius: 30px; padding: clamp(28px, 3.4vw, 44px); display: grid; gap: 14px; transform: rotate(2deg) }
.hotel .pct { font: 400 clamp(64px, 7vw, 96px)/.9 var(--display) }
.hotel h3 { font-size: 26px }
.hotel p { font-size: 17px; color: #2B3A10 }
@media (max-width: 900px) { .venue .wrap { grid-template-columns: 1fr } .hotel { transform: none } }

/* ——— Партнёрам ——— */
.partners { background: var(--ball); color: var(--night); color-scheme: light; overflow: hidden }
.partners .wrap { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: center }
.partners .h2 { font-size: clamp(40px, 5.6vw, 78px) }
.partners ul { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; font-size: 19px; font-weight: 500; max-width: 46ch }
.partners li { display: grid; grid-template-columns: 22px 1fr; gap: 12px }
.partners li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--night); margin-top: .4em }
.pack { background: var(--night); color: var(--glass); border-radius: 30px; padding: 36px; display: grid; gap: 16px; transform: rotate(-2deg) }
.pack .from { font: 400 clamp(36px, 3.6vw, 48px)/1 var(--display); white-space: nowrap }
.pack p { color: var(--soft) }
@media (max-width: 900px) { .partners .wrap { grid-template-columns: 1fr } .pack { transform: none } }

/* ——— Вопросы-ответы ——— */
.faq { background: var(--glass); color: var(--night); color-scheme: light }
.faq .wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(32px, 5vw, 80px) }
.faq details { border-bottom: 2px solid rgba(10, 22, 51, .12) }
.faq summary { cursor: pointer; list-style: none; padding: 24px 0; font-weight: 700; font-size: 20px; display: flex; justify-content: space-between; gap: 20px }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; font: 400 26px/1 var(--display); color: var(--turf); transition: transform .3s }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq details p { padding-bottom: 24px; color: var(--ink2); max-width: 60ch }
@media (max-width: 900px) { .faq .wrap { grid-template-columns: 1fr } }

/* ——— Заявка ——— */
.apply { background: var(--turf); overflow: hidden }
.apply .lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5 }
.apply .wrap { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start }
.apply .wrap > * { min-width: 0 }
.apply .h2 { font-size: clamp(40px, 5vw, 72px) }
form { background: var(--night); border-radius: 30px; padding: clamp(24px, 3.4vw, 40px); display: grid; gap: 16px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5) }
label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--soft) }
input, select { width: 100%; min-height: 54px; border-radius: 14px; border: 1px solid rgba(142, 163, 199, .38); background: var(--deep); color: var(--glass); font: 500 17px var(--body); padding: 12px 16px }
input:focus, select:focus { outline: none; border-color: var(--ball); box-shadow: 0 0 0 3px rgba(217, 242, 75, .2) }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 500 }
.check input { width: 22px; height: 22px; min-height: 22px; flex: none; accent-color: var(--ball); margin-top: 1px }
.form-msg { font-size: 15px; font-weight: 600; min-height: 1.4em }
.form-msg.ok { color: var(--ball) } .form-msg.err { color: #FF9C8A }
@media (max-width: 900px) { .apply .wrap { grid-template-columns: 1fr } }
@media (max-width: 520px) { .two { grid-template-columns: 1fr } }

/* ——— Подвал ——— */
footer { background: var(--deep); padding-block: 64px 40px; font-size: 15px }
footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px }
footer h4 { margin: 0 0 14px; font-size: 15px; color: var(--net); font-weight: 600 }
footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px }
footer a { color: var(--soft); text-decoration: none }
footer a:hover { color: var(--glass) }
footer .legal { grid-column: 1 / -1; color: var(--net); font-size: 13px; border-top: 1px solid var(--line); padding-top: 22px }
@media (max-width: 760px) { footer .wrap { grid-template-columns: 1fr } }

.mbar { display: none }
@media (max-width: 760px) {
  .mbar { display: flex; position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transition: transform .35s, opacity .35s }
  .mbar .btn { flex: 1 }
  .mbar.hide { transform: translateY(140%); opacity: 0 }
}

/* ——— Документы ——— */
.doc { background: var(--glass); color: var(--night); color-scheme: light; padding: calc(110px + env(safe-area-inset-top, 0px)) 0 80px }
.doc .wrap { max-width: 820px }
.doc h1 { font-size: clamp(32px, 4.4vw, 48px); margin-bottom: 10px }
.doc h2 { font-size: 22px; margin: 34px 0 10px }
.doc p, .doc li { color: #23314F; margin-bottom: 10px }
.doc .draft { background: #FFF6CC; border: 1px solid #E8D27A; border-radius: 12px; padding: 14px 18px; margin: 18px 0 28px; font-size: 15px }
.doc mark { background: #FFF0A8; padding: 0 3px; border-radius: 3px }
.doc-page .top { background: rgba(7, 16, 39, .92) }