.cl {
    --cl-accent: #FF9A3D; --cl-pad: clamp(20px, 5vw, 72px);
    position: relative; z-index: 1; background: #000; border-top: 1px solid rgba(255, 255, 255, 0.14); overflow: clip;
    font-family: 'Inter', sans-serif; color: #f4f4f0;
}
.cl *, .cl *::before, .cl *::after { box-sizing: border-box; }
.cl :where(h2, p) { margin: 0; }
.cl__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 5vh, 56px); padding: clamp(90px, 14vh, 150px) var(--cl-pad) clamp(70px, 10vh, 110px); text-align: center; }
.cl__intro { position: relative; z-index: 1; max-width: 34em; }
.cl__title { font-family: 'League Spartan', sans-serif; font-size: clamp(1.9rem, 3.4vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #fff; }
.cl__title em { font-style: italic; color: var(--cl-accent); }
.cl__intro p { margin-top: 1rem; font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.5; color: #d6d6da; }
.cl__curve { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cl__curve path { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; vector-effect: non-scaling-stroke; }

.cl__tile {
    position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(22px, 3vh, 34px);
    width: 100%; max-width: 1100px; min-height: 340px; padding: clamp(40px, 7vw, 90px) clamp(20px, 5vw, 70px) clamp(70px, 9vw, 110px);
    border-radius: clamp(26px, 4vw, 56px); overflow: hidden;
    background: radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%), var(--cl-accent);
    color: #0b0b0c;
}
.cl__plus { display: none; width: 34%; aspect-ratio: 1; }
.cl__plus::before, .cl__plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 13%; border-radius: 50px; background: #0b0b0c; transform: translate(-50%, -50%); }
.cl__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.cl__big { max-width: 12em; font-family: 'League Spartan', sans-serif; font-size: clamp(2rem, 6.2vw, 6.4rem); font-weight: 400; line-height: 0.98; letter-spacing: -0.03em; text-transform: uppercase; }
.cl__big span { font-weight: 800; }
.cl__btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 50px;
    background: #0b0b0c; color: #fff; text-decoration: none; font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.cl__btn:hover, .cl__btn:focus-visible { background: #fff; color: #0b0b0c; transform: translateY(-2px); }
.cl__btn:focus-visible { outline: 2px solid #0b0b0c; outline-offset: 4px; }
.cl__marquee { position: absolute; right: 0; bottom: clamp(20px, 4vh, 40px); left: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cl__marquee-track { display: flex; width: max-content; animation: clMarquee 48s linear infinite; }
.cl__marquee-track span { padding: 0 1.3em; font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; color: rgba(0, 0, 0, 0.74); }
.cl__marquee-track span::before { content: "+"; margin-right: 2.6em; color: rgba(0, 0, 0, 0.4); }
@keyframes clMarquee { to { transform: translateX(-50%); } }

html.cl-motion .cl__stage { display: block; height: 100vh; height: 100svh; padding: 0; }
html.cl-motion .cl__intro { position: absolute; top: clamp(96px, 15vh, 150px); right: 0; left: 0; width: min(34em, calc(100% - 2 * var(--cl-pad))); margin: 0 auto; }
/* Full-screen tile shown through a growing clip (set by closing.js): no layout work while scrolling */
html.cl-motion .cl__tile { position: absolute; top: 16px; left: 16px; width: calc(100% - 32px); height: calc(100% - 32px); max-width: none; min-height: 0; padding: 0; border-radius: 0; clip-path: inset(50% 50% 50% 50%); will-change: clip-path; }
html.cl-motion .cl__plus { display: block; position: absolute; top: 0; left: 0; width: 75px; height: 75px; aspect-ratio: auto; }
html.cl-motion .cl__big { position: absolute; top: 46%; left: 50%; width: min(86vw, 12em); max-width: none; transform: translate(-50%, -54%); opacity: 0; }
html.cl-motion .cl__btn { position: absolute; top: calc(46% + clamp(90px, 15vh, 190px)); left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; }
html.cl-motion .cl__btn:hover, html.cl-motion .cl__btn:focus-visible { transform: translateX(-50%) translateY(-2px); }
html.cl-motion .cl__marquee { opacity: 0; }

@media (max-width: 899px) {
    html.cl-motion .cl__tile { top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
    html.cl-motion .cl__btn { top: calc(46% + 22vw + 40px); }
}
@media (prefers-reduced-motion: reduce) {
    .cl__marquee-track { animation: none !important; }
    .cl__tile { padding-bottom: clamp(40px, 7vw, 90px); }
    .cl__marquee { position: static; -webkit-mask-image: none; mask-image: none; }
    .cl__marquee-track { flex-wrap: wrap; justify-content: center; width: auto; gap: 8px 0; }
    .cl__marquee-track span:nth-child(n+17) { display: none; }
}