.courses-section{min-height:100svh;padding:120px 0 100px;position:relative}.courses-section:before{content:"";pointer-events:none;background-image:linear-gradient(#ffcd560a 1px,#0000 1px),linear-gradient(90deg,#ffcd560a 1px,#0000 1px);background-size:64px 64px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(at top,#000 30%,#0000 75%);mask-image:radial-gradient(at top,#000 30%,#0000 75%)}.courses-header{text-align:center;margin-bottom:72px;position:relative}.courses-headline{text-transform:uppercase;letter-spacing:-.025em;color:#fff;margin:0 0 22px;font-family:Syne,sans-serif;font-size:clamp(2.6rem,5.4vw,5rem);font-weight:800;line-height:1.02}.courses-headline .line{display:block}.courses-headline .highlight{color:var(--accent,#ffcd56);font-style:italic}.courses-desc{color:#a1a1aa;max-width:620px;margin:0 auto;font-family:Outfit,sans-serif;font-size:1.05rem;line-height:1.7}.courses-empty{text-align:center;color:#a1a1aa;padding:80px 20px;font-family:Outfit,sans-serif}.courses-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;display:grid;position:relative}.course-card{background:var(--card,#141419);border:1px solid var(--border,#ffffff14);border-radius:var(--radius-lg,16px);color:inherit;opacity:0;flex-direction:column;gap:12px;padding:16px;text-decoration:none;transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s;animation:.7s cubic-bezier(.16,1,.3,1) forwards courseRise;display:flex;position:relative;overflow:hidden;transform:translateY(20px)}@keyframes courseRise{to{opacity:1;transform:translateY(0)}}.course-card:before{content:"";border-radius:inherit;-webkit-mask-composite:xor;opacity:0;pointer-events:none;background:linear-gradient(135deg,#0000 30%,#ffcd5666 60%,#0000 90%);padding:1px;transition:opacity .4s;position:absolute;inset:-1px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.course-card:hover{border-color:#0000;transform:translateY(-6px);box-shadow:0 24px 48px #00000080,0 0 24px #ffcd5614}.course-card:hover:before{opacity:1}.course-cover{aspect-ratio:16/10;background:#0a0a0c;border-radius:12px;position:relative;overflow:hidden}.course-cover img{transition:transform .6s cubic-bezier(.16,1,.3,1)}.course-card:hover .course-cover img{transform:scale(1.05)}.course-cover-shade{background:linear-gradient(#0000 30%,#0000008c 100%);position:absolute;inset:0}.course-cover-placeholder{color:#2a2a2f;justify-content:center;align-items:center;width:100%;height:100%;font-size:2.5rem;display:flex}.course-play{color:#030305;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.course-play svg{background:var(--accent,#ffcd56);box-sizing:content-box;opacity:0;border-radius:999px;width:22px;height:22px;padding:14px;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .3s;transform:scale(.85);box-shadow:0 12px 30px #ffcd5659}.course-card:hover .course-play svg{opacity:1;transform:scale(1)}.course-badge{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--accent,#ffcd56);letter-spacing:.1em;text-transform:uppercase;background:#000000b3;border:1px solid #ffcd564d;border-radius:999px;padding:5px 10px;font-family:Space Mono,monospace;font-size:.65rem;font-weight:700;position:absolute;top:12px;left:12px}.course-deal{background:var(--accent,#ffcd56);color:#030305;letter-spacing:.05em;border-radius:999px;padding:5px 10px;font-family:Space Mono,monospace;font-size:.66rem;font-weight:700;position:absolute;top:12px;right:12px;box-shadow:0 6px 18px #ffcd5666}.course-meta-row{justify-content:space-between;align-items:center;margin-top:4px;padding:0 4px;display:flex}.course-tag{color:var(--accent,#ffcd56);text-transform:uppercase;letter-spacing:.12em;font-family:Space Mono,monospace;font-size:.7rem}.course-lessons{color:#71717a;letter-spacing:.05em;font-family:Space Mono,monospace;font-size:.7rem}.course-title{color:#fff;letter-spacing:-.015em;margin:0 0 0 4px;font-family:Syne,sans-serif;font-size:1.25rem;font-weight:700;line-height:1.2}.course-tagline{color:#a1a1aa;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0 0 0 4px;font-family:Outfit,sans-serif;font-size:.9rem;line-height:1.5;display:-webkit-box;overflow:hidden}.course-foot{border-top:1px solid #ffffff0f;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:14px;display:flex}.course-price-group{flex-direction:column;gap:3px;min-width:0;display:flex}.course-price-label{text-transform:uppercase;letter-spacing:.14em;color:#71717a;font-family:Space Mono,monospace;font-size:.58rem;font-weight:700}.course-price-line{align-items:baseline;gap:8px;display:flex}.course-price{color:var(--accent,#ffcd56);font-family:Syne,sans-serif;font-size:1.5rem;font-weight:800;line-height:1}.course-price-was{color:#71717a;font-family:Outfit,sans-serif;font-size:.88rem;font-weight:500;-webkit-text-decoration:line-through #ffffff4d;text-decoration:line-through #ffffff4d}.course-cta{white-space:nowrap;color:#f5f5f5;background:var(--accent,#ffcd56);letter-spacing:.03em;border-radius:999px;flex-shrink:0;align-items:center;gap:7px;padding:10px 18px;font-family:Syne,sans-serif;font-size:.82rem;font-weight:700;transition:gap .25s,box-shadow .3s,transform .25s;display:inline-flex}.course-card:hover .course-cta{gap:10px;box-shadow:0 10px 24px #ffcd564d}.course-cta svg{transition:transform .25s}.course-card:hover .course-cta svg{transform:translate(2px,-2px)}.courses-toolbar{background:#ffffff06;border:1px solid #ffffff0f;border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px;padding:16px 20px;display:flex}.courses-toolbar-left,.courses-toolbar-right{align-items:center;gap:12px;display:flex}.courses-select{align-items:center;gap:10px;font-family:Outfit,sans-serif;display:inline-flex}.courses-select-label{color:#71717a;text-transform:uppercase;letter-spacing:.1em;font-family:Space Mono,monospace;font-size:.7rem}.courses-select select{color:#fff;cursor:pointer;appearance:none;background:#0f0f12 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffcd56'><path d='M7 10l5 5 5-5z'/></svg>") right 8px center/16px no-repeat;border:1px solid #ffffff1a;border-radius:8px;padding:8px 32px 8px 12px;font-family:inherit;font-size:.9rem;transition:border-color .2s,box-shadow .2s}.courses-select select:hover,.courses-select select:focus{border-color:#ffcd5680;outline:none;box-shadow:0 0 0 3px #ffcd5614}.course-meta-line{color:#a1a1aa;letter-spacing:.04em;flex-wrap:wrap;align-items:center;gap:6px;font-family:Space Mono,monospace;font-size:.72rem;display:flex}.course-meta-line .dot{color:#3a3a40}.course-instructor{align-items:center;gap:8px;margin-top:2px;display:flex}.course-instructor-avatar{-o-object-fit:cover;object-fit:cover;background:#1a1a1f;border:1px solid #ffcd5640;border-radius:999px;width:28px;height:28px}.course-instructor-avatar.fallback{color:#ffcd56;justify-content:center;align-items:center;font-family:Syne,sans-serif;font-size:.8rem;font-weight:700;display:inline-flex}.course-instructor-name{color:#d4d4d8;font-family:Outfit,sans-serif;font-size:.85rem}.course-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:4px 0 0;display:-webkit-box;overflow:hidden}.course-cta{background:#ffcd561a;border:1px solid #ffcd564d;border-radius:999px;padding:8px 14px;font-size:.78rem}.course-card:hover .course-cta{background:var(--accent,#ffcd56);color:#030305;border-color:var(--accent,#ffcd56)}@media (max-width:600px){.courses-section{padding:100px 0 60px}.courses-grid{grid-template-columns:1fr;gap:20px}.courses-toolbar{flex-direction:column;align-items:stretch}.courses-toolbar-left,.courses-toolbar-right{justify-content:space-between;width:100%}.courses-select{flex:1}.courses-select select{width:100%}}
