.hero { color-scheme: dark; font-family: Inter, Arial, sans-serif; }
.hero, .hero * { box-sizing: border-box; }
.hero { position: relative; isolation: isolate; min-height: 820px; overflow: hidden; background: #020c16; }
.hero .container { position: relative; z-index: 2; width: min(1120px, calc(100% - 48px)); height: 100%; min-height: 820px; margin: 0 auto; padding-inline: 48px; box-shadow: -18px 0 30px -34px rgba(0, 175, 242, .6), 18px 0 30px -34px rgba(0, 175, 242, .6); }
.hero .atmosphere, .hero .stars { display: none; }
.hero .utility-row { position: relative; z-index: 5; display: flex; align-items: center; gap: 14px; height: 68px; padding-top: 20px; }
.hero .brand { color: #8bb8d6; font-size: 13px; font-weight: 600; letter-spacing: .16em; }
.hero .utility-line { width: 108px; height: 1px; background: rgba(99, 180, 225, .45); }
.hero .practice { margin-left: auto; color: #8bb8d6; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; white-space: nowrap; }
.hero .content { position: relative; display: flex; min-height: 488px; padding-top: 14px; }
.hero .copy { position: relative; z-index: 5; width: 55%; }
.hero h1 { max-width: 620px; margin: 0; font-size: clamp(2.15rem, 3.25vw, 2.72rem); font-weight: 500; letter-spacing: -.036em; line-height: 1.085; text-wrap: balance; }
.hero h1 span { color: #00cfff; }
.hero .intro { margin: 22px 0 0; color: #c6d0d8; font-size: 16px; font-weight: 400; line-height: 1.38; }
.pro-line-break { display: none; }
.hero .event-date { display: flex; align-items: center; gap: 12px; margin-top: 23px; color: #eaf5fa; font-size: 19px; font-weight: 600; }
.hero .calendar { flex: 0 0 auto; width: 26px; fill: none; stroke: #29b8ff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(41,184,255,.8)) drop-shadow(0 0 12px rgba(41,184,255,.35)); }
.hero .action-row { display: flex; align-items: center; gap: 20px; margin-top: 19px; }
.hero .register { display: grid; width: 270px; height: 60px; min-height: 60px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.75); border-radius: 30px; background: linear-gradient(135deg, #fff 0%, #e4f8ff 47%, #bdeaff 100%); box-shadow: inset 0 1px 2px rgba(255,255,255,.9), 0 0 11px rgba(55, 201, 255, .55), 0 0 27px rgba(0, 138, 255, .22); color: #005dcf; font-size: 18px; font-weight: 700; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.hero .register:hover, .hero .register:focus-visible { transform: translateY(-2px); box-shadow: inset 0 1px 2px #fff, 0 0 18px rgba(80,218,255,.8), 0 0 36px rgba(0,138,255,.35); }
.hero .free { color: #c6d5e4; font-size: 16px; }
.hero .visual { position: absolute; z-index: 3; width: 760px; height: 680px; right: -72px; top: -150px; }
.hero .visual::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(2,10,16,.36) 0%, rgba(2,10,16,.13) 23%, transparent 43%); }
.hero .portrait { position: absolute; z-index: 1; width: 100%; right: 0; bottom: 0; }
.hero .benefits { position: relative; z-index: 6; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 49px; padding-bottom: 40px; }
.hero .benefit { position: relative; min-height: 192px; padding: 10px 29px 0; }
.hero .benefit:first-child { padding-left: 0; }
.hero .benefit + .benefit::before { content: ""; position: absolute; top: 46px; bottom: 0; left: 0; width: 1px; background: rgba(89, 166, 207, .28); }
.hero .benefit img { display: block; width: 68px; height: 68px; filter: drop-shadow(0 0 6px rgba(41,184,255,.8)) drop-shadow(0 0 17px rgba(41,184,255,.35)); }
.hero .benefit:first-child img { width: 92px; height: 92px; transform: translateY(-16px); }
.hero .benefit:first-child p { margin-top: -16px; }
.hero .benefit p { margin: 8px 0 0; color: #d5dee6; font-size: 17px; font-weight: 400; line-height: 1.36; }
.hero .bottom-line { display: none; }
@media (max-width: 1199px) { .hero .container { width: min(1120px, calc(100% - 56px)); } .hero .visual { right: -65px; top: -96px; transform: scale(.91); transform-origin: right top; } .hero .copy { width: 61%; } .hero .bottom-line { width: min(1120px, calc(100% - 56px)); } }
@media (max-width: 900px) { .hero, .hero .container { min-height: auto; } .hero { overflow: hidden; } .hero .container { padding-bottom: 26px; } .hero .content { min-height: 500px; padding-top: 38px; } .hero .copy { width: 65%; } .hero h1 { font-size: clamp(2rem, 4.3vw, 2.5rem); } .hero .visual { right: -242px; top: 8px; transform: scale(.76); } .hero .benefits { grid-template-columns: repeat(2, 1fr); gap: 28px 0; margin-top: 18px; } .hero .benefit { min-height: 125px; padding: 0 22px; } .hero .benefit:nth-child(3) { padding-left: 0; } .hero .benefit:nth-child(3)::before { display: none; } }
@media (max-width: 640px) { .hero .container { width: min(100% - 38px, 520px); } .hero .utility-row { gap: 10px; padding-top: 15px; } .hero .brand { font-size: 11px; } .hero .utility-line { width: 50px; } .hero .practice { font-size: 8px; white-space: normal; } .hero .content { display: block; min-height: 0; padding-top: 34px; } .hero .copy { width: 100%; } .hero h1 { font-size: clamp(1.9rem, 8vw, 2.25rem); letter-spacing: -.045em; } .hero .intro { font-size: 15px; } .hero .event-date { font-size: 16px; line-height: 1.3; } .hero .action-row { align-items: flex-start; flex-direction: column; gap: 10px; } .hero .register { width: min(100%, 270px); } .hero .visual { position: relative; width: min(112vw, 440px); height: min(96vw, 375px); right: auto; top: auto; margin: -50px -22vw 0 calc(-14vw - 48px); transform: none; } .hero .portrait { width: 100%; bottom: 0; } .hero .benefits { grid-template-columns: 1fr; gap: 22px; margin-top: 0; } .hero .benefit, .hero .benefit:first-child { min-height: auto; padding: 0; } .hero .benefit + .benefit::before { display: none; } .hero .benefit:first-child img { width: 78px; height: 78px; } .hero .benefit p { font-size: 16px; } .hero .bottom-line { width: calc(100% - 38px); } }
@media (max-width: 640px) { .hero .container { width: 100%; padding-inline: 20px; box-shadow: none; } .hero .visual { margin-left: calc(-14vw); } .hero .action-row { width: min(100%, 270px); align-items: center; } .hero .free { text-align: center; } }
@media (max-width: 640px) { .hero .action-row { margin-inline: auto; } .hero .visual { width: min(124vw, 484px); height: min(106vw, 413px); margin-left: calc(-22vw); margin-bottom: 60px; } }
@media (max-width: 640px) { .hero .benefits { gap: 28px; } .hero .benefit, .hero .benefit:first-child { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 20px; align-items: start; } .hero .benefit img { width: 68px; height: 68px; } .hero .benefit:first-child img { width: 78px; height: 78px; transform: none; } .hero .benefit p, .hero .benefit:first-child p { margin: 0; } }
@media (min-width: 641px) and (max-width: 900px) { .hero .content { min-height: 470px; } .hero .copy { width: 60%; } .hero h1 { max-width: 470px; font-size: clamp(2rem, 4.2vw, 2.35rem); } .hero .visual { right: -90px; top: -85px; transform: scale(.56); transform-origin: right top; } }
@media (min-width: 901px) and (max-width: 1199px) { .hero .copy { width: 58%; } .hero h1 { max-width: 540px; font-size: clamp(2.1rem, 3.45vw, 2.55rem); } .hero .visual { right: -125px; top: -112px; transform: scale(.84); transform-origin: right top; } }
@media (min-width: 901px) and (max-width: 1199px) { .hero .benefit:last-child { padding-right: 0; } }
@media (min-width: 901px) and (max-width: 1199px) { .pro-line-break { display: inline; } }
@media (min-width: 641px) and (max-width: 900px) { .hero .copy { position: static; } .hero .event-date { position: absolute; top: 374px; left: 0; width: auto; font-size: 21px; white-space: nowrap; } .hero .action-row { position: absolute; top: 290px; right: -20px; left: auto; display: flex; width: 220px; align-items: center; flex-direction: column; gap: 8px; } .hero .register { width: 220px; min-height: 56px; } .hero .free { font-size: 14px; text-align: center; } }
@media (min-width: 901px) { .hero .action-row { transform: translateY(16px); } .hero .benefits { top: 16px; margin-top: 49px; } }