/* Fonts live in fonts/. */
@font-face { font-family: NeutralFace; src: url(fonts/NeutralFace-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: NeutralFace; src: url(fonts/NeutralFace-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url(fonts/PressStart2P-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --f-main: NeutralFace, sans-serif;
  --f-pixel: "Press Start 2P", monospace;
  --dark: #1d1d1d;
  --grey: #6e6e6e;
  --light: #f2f2f2;
  --red: #ff4d56;
  --lime: #cee833;
  --line: rgba(255, 255, 255, .8);
  --grad: linear-gradient(165deg, #f8a5a9 0%, #f3eeee 30%, #f6c9cb 45%, #fd6d74 70%, #ff5a62 85%, #f9a0a4 100%);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .25'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 1rem = 1/10 of a design pixel; the layout scales with the screen. */
html { font-size: min(10px, 100vw / 144); scroll-behavior: smooth; }
@media (max-width: 900px) { html { font-size: min(13px, 100vw / 39); } }
@media (hover: hover) { html, a, summary { cursor: url(img/cursor.svg) 0 0, auto; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--dark); color: #fff; font: 400 1.8rem/1.15 var(--f-main); text-transform: uppercase; overflow-x: hidden; }
a { color: inherit; text-decoration: none; transition: color .2s, background .2s; }
ul, ol { list-style: none; }
img { display: block; max-width: none; height: auto; pointer-events: none; }
i { font-style: normal; color: var(--lime); }

.dark, .grey { position: relative; background: var(--noise), var(--dark); background-blend-mode: overlay; }
.grey { background: var(--noise), var(--grey); }
.dark { background: linear-gradient(#0006, #0006), var(--noise), #000; background-blend-mode: normal, screen; }
.wrap { position: relative; max-width: 144rem; margin: 0 auto; padding: 0 4.8rem; }
.label { font-size: 1.8rem; line-height: 1.5; font-weight: 700; padding-left: 4.5rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 99rem; font-size: 2.2rem; }
.btn-line { width: 24.6rem; height: 5.1rem; border: 1px solid #fff; }
.btn-line:hover { background: #fff; color: var(--dark); }
.btn-fill { width: 38.8rem; height: 7.6rem; background: var(--red); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .5); }
.btn-fill:hover { background: var(--lime); color: var(--dark); }

/* Hero */
.hero { overflow: hidden; }
.nav { display: flex; justify-content: space-between; align-items: center; padding-top: 1.9rem; }
.nav ul { display: flex; gap: 5.7rem; margin-left: -4.8rem; padding: 2rem 0 .6rem 4.8rem; border-bottom: 1px solid #fff; }
.nav ul a:hover { color: var(--lime); }
.hero-body { padding: 5.5rem 0 7rem 11rem; }
.hero h1 { width: fit-content; position: relative; z-index: 1; font: 400 8.3rem/8.8rem var(--f-pixel); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { position: relative; z-index: 1; max-width: 58rem; margin: 2.5rem 0 4.2rem; font-size: 2rem; line-height: 1.05; }
.hand { position: absolute; top: 15rem; right: -12rem; width: 70rem; transform: rotate(-5deg); filter: drop-shadow(.8em .5em .6em rgba(0, 0, 0, .55)); }

/* About */
.about, .learn { display: grid; grid-template-columns: 44.4rem 1fr; align-items: start; }
.about { padding-top: 14rem; }
.about .label { max-width: 38.5rem; }
.about-text { font-size: 3.2rem; line-height: 1.3; max-width: 85rem; }
.about-text p + p { margin-top: 9.5rem; }
.learn { grid-template-columns: 29.7rem 1fr; align-items: start; padding: 26rem 4.8rem 32rem; }
.learn .label { margin-top: 4.5rem; }
.pills b { display: block; }
.pills li { width: 93rem; padding: 3.2rem 4rem 3.2rem 5.3rem; border-radius: 99rem; background: #fff; color: var(--dark); font-size: 3.2rem; line-height: 1.3; box-shadow: 0 2rem 4rem rgba(0, 0, 0, .55); position: relative; z-index: 2; }
.pills .lime { z-index: 1; }
.pills .red { z-index: 0; }
.pills li:nth-child(1) { margin-left: 1rem; }
.pills li:nth-child(2) { transform: rotate(2deg); margin: 0 0 0 4rem; padding-left: 12.5rem; }
.pills li:nth-child(3) { transform: rotate(-2.5deg); width: 99rem; margin: .5rem 0 0 0; padding: 4rem 6rem 4rem 7rem; }
.lime { background: var(--lime) !important; }
.red { background: var(--red) !important; }

/* Program and FAQ lists */
.list { padding-top: 9rem; }
.list > .label { position: absolute; top: 14rem; }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { list-style: none; display: grid; grid-template-columns: 10.4rem 1fr auto; column-gap: 4.7rem; padding: 5.6rem 4.3rem 5rem 29.3rem; }
summary::-webkit-details-marker { display: none; }
summary:focus { outline: none; }
summary:focus-visible { outline: 1px solid var(--lime); }
summary b { font-size: 3.2rem; line-height: 1.25; }
.num { grid-row: span 2; display: flex; align-items: center; justify-content: center; height: 10.4rem; border: 1px solid var(--line); font-size: 4.8rem; }
.date { justify-self: start; width: 40.3rem; padding: .9rem 2.8rem; background: var(--red); font-size: 3.3rem; white-space: nowrap; margin-bottom: 5rem; }
.more { position: relative; z-index: 2; grid-column: 3; grid-row: 1; padding-top: 4.4rem; font-size: 1.8rem; white-space: nowrap; }
.more::before { content: "+  больше"; white-space: pre; }
details[open] .more::before { content: "–  меньше"; }
summary:hover .more { color: var(--lime); }
details[open] summary { padding-bottom: 3.5rem; }
.body { padding: 0 13rem 5rem 44.4rem; font-size: 2.2rem; line-height: 1.32; }
.body p + p { margin-top: 1.5em; }
.body a { text-decoration: underline; text-underline-offset: .15em; }
.note { padding: 6rem 0 13rem; font-size: 3.4rem; }
.splash { position: absolute; z-index: 1; top: -19.3rem; right: 2.7rem; width: 40rem; }

.faq { padding-bottom: 8.7rem; }
.faq .label { top: 15.5rem; }
.faq summary { position: relative; display: block; padding: 6.5rem 4.3rem 6.5rem 56.7rem; }
.faq .more { position: absolute; top: 6.5rem; right: 4.3rem; padding-top: 0; }
.faq summary b { display: block; max-width: 65rem; font-size: 3.2rem; line-height: 1.05; }
.m { display: none; }
.faq .body { padding: 0 4.3rem 6.5rem 56.7rem; font-size: 2.4rem; line-height: 1.25; }

/* Format */
.format { padding: 18.2rem 4.8rem 16.5rem; }
.format .label { position: absolute; top: 30.7rem; }
.collage { position: relative; width: 89rem; height: 49rem; margin-left: 35.2rem; font-size: 1rem; }
.collage > * { position: absolute; }
.bulb { left: 0; top: 1.5em; width: 26.8em; z-index: 1; transform: rotate(-5deg); filter: drop-shadow(.8em .5em .6em rgba(0, 0, 0, .55)); }
.collage span { display: flex; align-items: center; justify-content: center; border-radius: 99em; background: #fff; color: var(--dark); font-size: 3.4em; box-shadow: 0 .4em .8em rgba(0, 0, 0, .3); }
.f1 { left: 10.06em; top: 2.88em; width: 13.85em; height: 2.53em; transform: rotate(-1deg); z-index: 3; }
.f2 { left: 7.88em; top: 4.91em; width: 9.35em; height: 2.74em; transform: rotate(2deg); z-index: 2; }
.f3 { left: 13.91em; top: 7.12em; width: 11.24em; height: 2.5em; z-index: 4; }
.f4 { left: 4.1em; top: 8.97em; width: 22.07em; height: 2.79em; transform: rotate(1.5deg); z-index: 0; }
.f5 { left: 4.65em; top: 11.62em; width: 18.15em; height: 2.5em; transform: rotate(-2.5deg); z-index: 5; }

/* Registration band */
.band { display: flex; align-items: center; justify-content: center; height: 16.8rem; background: var(--light); color: var(--dark); font-size: 3.6rem; }
.band:hover { background: var(--lime); }

/* Bonuses */
#bonus { overflow: hidden; }
.bonus { position: static; padding: 12.5rem 4.8rem 7rem; }
.big { font-size: 4.6rem; line-height: 1.4; }
.bonus ol { margin: 16.5rem 0 0 44.4rem; font-size: 3.1rem; line-height: 1.25; max-width: 84rem; counter-reset: n; }
.bonus li { position: relative; padding-left: 1.05em; counter-increment: n; }
.bonus li + li { margin-top: 4rem; }
.bonus li::before { content: counter(n) "."; position: absolute; left: 0; }
.head { position: absolute; left: -8rem; bottom: 0; width: 56rem; }

/* Footer */
.foot { padding: 43.5rem 4.8rem 4.4rem; }
.foot h2 { width: fit-content; margin-left: 4.5rem; font: 700 9rem/1.22 var(--f-main); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot h2 .nw { white-space: nowrap; }
.contact { display: flex; align-items: center; margin-top: 3.5rem; font-size: 3.2rem; }
.contact a:hover { color: var(--lime); }
.up { position: fixed; left: 3.8rem; bottom: 4.4rem; z-index: 10; width: 4.5rem; text-align: center; }
.up + a { margin-left: 3.5rem; }

/* Mobile */
@media (max-width: 900px) {
  body { font-size: 1rem; }
  .wrap { padding: 0 2rem; }
  .label { font-size: 1.1rem; line-height: 1.1; padding-left: 0; }
  .btn { font-size: 1rem; }
  .btn-line { width: 10.4rem; height: 2.2rem; }
  .btn-fill { width: 21.8rem; height: 4.2rem; font-size: 1.4rem; margin-left: -.8rem; }

  .nav { padding-top: 1.6rem; }
  .nav ul { gap: 2.5rem; margin-left: -2rem; padding: .5rem 0 .4rem 2rem; }
  .hero-body { padding: 1.4rem 2rem 2.5rem; }
  .hero h1 { font-size: 3rem; line-height: 3.3rem; }
  .lead { max-width: 30rem; margin: 1.3rem 0 1.6rem; font-size: 1rem; }
  .hand { top: 6.5rem; right: -2.5rem; width: 18rem; }

  .about { grid-template-columns: 16.7rem 1fr; padding-top: 2rem; }
  .about-text { font-size: 1.2rem; line-height: 1.08; }
  .about-text p + p { margin-top: 3.7rem; }
  .learn { display: block; padding: 4rem 1.2rem 7rem; }
  .learn .label { padding-left: .8rem; margin: 0 0 3.5rem; }
  .pills { max-width: 40rem; }
  .pills li, .pills li:nth-child(n) { width: auto; margin: -.4rem 0 0; padding: 2rem 2rem 2rem 2.8rem; font-size: 1.15rem; line-height: 1; box-shadow: 0 1rem 2rem rgba(0, 0, 0, .55); }

  .list { padding: 2rem 0 0; }
  .list > .label { position: static; padding: 0 2rem 1.2rem; }
  summary { grid-template-columns: 4.8rem 1fr auto; column-gap: 2.8rem; padding: 1.8rem 2rem 2.6rem 1.7rem; }
  summary b { font-size: 1.1rem; line-height: 1.1; }
  details[open] summary { padding-bottom: 1.2rem; }
  .num { height: 4.8rem; font-size: 2.4rem; }
  .date { width: 14.7rem; padding: .3rem 1rem; font-size: 1.2rem; margin-bottom: 1.3rem; }
  .more { padding-top: 0; margin-left: -2rem; font-size: 1.2rem; }
  .more::before { content: "+ больше"; }
  details[open] .more::before { content: "– меньше"; }
  .body { padding: 0 2rem 2.5rem 9.3rem; font-size: 1rem; }
  .note { padding: 2rem 2rem 4rem 1.2rem; font-size: 1.2rem; }
  .splash { top: -6.5rem; right: 3.5rem; width: 13rem; }

  .faq { padding-bottom: 4rem; }
  .faq summary { display: grid; grid-template-columns: 1fr auto; padding: 2rem 2rem 2.6rem 9.3rem; column-gap: 1rem; }
  .faq .more { position: static; margin-left: 0; }
  .faq summary b { max-width: none; font-size: 1.1rem; line-height: 1.1; }
  .m { display: inline; }
  .d { display: none; }
  .faq .body { padding: 0 2rem 2.5rem 9.3rem; font-size: 1rem; line-height: 1.25; }

  .format { padding: 4rem 2rem 10rem; }
  .format .label { position: static; margin-bottom: 1.5rem; }
  .collage { width: 89em; height: 49em; margin-left: .5rem; font-size: .41rem; }

  .band { height: 9.8rem; font-size: 1.4rem; }

  .bonus { padding: 4rem 1rem 6rem; }
  .big { font-size: 1.6rem; line-height: 1.08; }
  .bonus ol { margin: 6.5rem 0 0 16.1rem; max-width: 20.5rem; font-size: 1.2rem; line-height: 1.1; }
  .bonus li { padding-left: 0; }
  .bonus li::before { position: static; margin-right: .3em; }
  .bonus li + li { margin-top: 2.8rem; }
  .head { left: -4rem; width: 20.5rem; }

  .foot { padding: 6rem 1.2rem 4.4rem; }
  .foot h2 { margin-left: 0; font-size: 3.2rem; line-height: 1.05; }
  .contact { justify-content: space-between; margin-top: 4rem; font-size: 1.4rem; }
  .up { left: auto; right: 1.2rem; bottom: 3.6rem; width: auto; font-size: 2.8rem; }
  .up + a { margin-left: 0; }
}