@media (max-width: 900px) {
    .page-shell {
        width: calc(100% - 40px);
    }

    .hero-section {
        min-height: auto;
        padding: 96px 0 72px;
    }

    .hero-section h1 {
        font-size: clamp(3rem, 12vw, 5rem);
        letter-spacing: -0.065em;
    }

    .hero-description {
        max-width: 100%;
        font-size: 1.06rem;
        line-height: 1.7;
    }
}

@media (max-width: 560px) {
    .page-shell {
        width: calc(100% - 28px);
    }

    .hero-section {
        min-height: 100svh;
        padding: 96px 0 46px;
        justify-content: center;
    }

    .hero-eyebrow {
        font-size: 0.76rem;
        letter-spacing: 0.15em;
    }

    .hero-section h1 {
        font-size: clamp(2.55rem, 13.5vw, 4rem);
        line-height: 0.98;
    }

    .hero-description {
        margin-top: 30px;
        font-size: 1.02rem;
        line-height: 1.7;
    }

    .hero-button {
        width: 100%;
        margin-top: 42px;
    }

    .projects-section {
        padding: 96px 0 72px;
    }
}
@media (max-width: 900px) {
    .site-header-inner {
        height: 74px;
        padding: 0 20px;
    }

    .site-header.is-floating {
        padding: 10px 14px 0;
    }

    .site-header.is-floating .site-header-inner {
        height: 64px;
    }


    .discord-button {
        min-height: 42px;
        padding: 0 16px;
        font-size: 0.86rem;
    }

    .discord-button-full {
        display: none;
    }

    .discord-button-short {
        display: inline;
    }
}

@media (max-width: 560px) {
    .site-header-inner {
        padding: 0 14px;
    }

    .menu-button {
        width: 42px;
        height: 42px;
    }

    .site-logo {
        gap: 5px;
    }


    .discord-button {
        min-height: 40px;
        padding: 0 13px;
        font-size: 0.78rem;
    }
}

@media (max-width: 390px) {

    .discord-button {
        padding: 0 11px;
        font-size: 0.72rem;
    }
}
@media (max-width: 560px) {
    .site-header-inner {
        display: grid;
        grid-template-columns: 44px 1fr auto;
        gap: 10px;
        padding: 0 12px;
    }

    .site-logo {
        position: static;
        transform: none;
        justify-self: center;
        min-width: 0;
    }

    .discord-button-full {
        display: none;
    }

    .discord-button-short {
        display: inline;
    }

    .discord-button {
        min-height: 38px;
        padding: 0 12px;
        font-size: 0.72rem;
        white-space: nowrap;
    }
}
@media (max-width: 370px) {

    .discord-button {
        padding: 0 10px;
        font-size: 0.68rem;
    }
}
@media (max-width: 560px) {
    .site-header-inner {
        display: grid;
        grid-template-columns: 44px 1fr auto;
        gap: 10px;
        padding: 0 12px;
    }

    .site-logo {
        position: static;
        transform: none;
        justify-self: center;
        gap: 4px;
        min-width: 0;
    }

    .menu-button {
        width: 42px;
        height: 42px;
    }

    .upbarTopLogoSvgMini {
        width: 24px !important;
        height: 24px !important;
        transform: rotate(45deg);
        flex-shrink: 0;
    }

    .upbarTopLogoSvg {
        width: 150px !important;
        height: 38px !important;
        margin-top: -10px;
        fill: rgb(177, 30, 111);
        flex-shrink: 0;
    }

    .discord-button-full {
        display: none;
    }

    .discord-button-short {
        display: inline;
    }

    .discord-button {
        min-height: 38px;
        padding: 0 12px;
        font-size: 0.72rem;
        white-space: nowrap;
    }
}
@media (max-width: 370px) {
    .site-logo {
        gap: 3px;
    }

    .upbarTopLogoSvgMini {
        width: 21px !important;
        height: 21px !important;
    }

    .upbarTopLogoSvg {
        width: 125px !important;
        height: 32px !important;
        margin-top: -8px;
    }

    .discord-button {
        padding: 0 10px;
        font-size: 0.68rem;
    }
}
@media (max-width: 900px) {
    .projects-section {
        padding: 88px 0;
    }

    .project-grid {
        grid-template-columns: 1fr;
    }

    .project-card {
        min-height: auto;
    }
}

@media (max-width: 560px) {
    .projects-section {
        padding: 72px 0;
    }

    .section-heading h2 {
        font-size: clamp(2.35rem, 11vw, 4rem);
    }

    .section-heading p {
        font-size: 1.02rem;
    }

    .project-card {
        padding: 26px;
        border-radius: 28px;
    }

    .project-card h3 {
        font-size: 1.45rem;
    }
}
@media (max-width: 560px) {
    .project-icon {
        width: 50px;
        height: 50px;
        border-radius: 16px;
        margin-bottom: 24px;
    }

    .project-icon svg {
        width: 24px;
        height: 24px;
    }
}
@media (max-width:560px){

    .website-icon{
        width:50px;
        height:50px;
        border-radius:16px;
        margin-bottom:24px;
    }

    .website-icon img{
        width:26px;
        height:26px;
    }

}
@media (max-width: 560px) {
    .hero-actions {
        width: 100%;
        flex-direction: column;
        margin-top: 42px;
    }

    .hero-actions .hero-button {
        width: 100%;
    }
}
@media (max-width:560px){

    .page-breadcrumb{
        margin-bottom:20px;
        font-size:.88rem;
        gap:8px;
    }

}
@media (max-width: 900px) {
    .movieBenefitsGrid {
        grid-template-columns: 1fr;
    }

    .movieBenefitCardLarge,
    .movieBenefitCardWide {
        grid-column: auto;
    }

    .movieBenefitCard {
        min-height: auto;
    }
}

@media (max-width: 560px) {

    .movieBenefitCard {
        padding: 26px;
        border-radius: 28px;
    }

    .movieBenefitCard h3 {
        font-size: 1.42rem;
    }
}
@media (max-width: 900px) {
    .commonSection {
        margin: 110px 0;
    }
}

@media (max-width: 560px) {
    .commonSection {
        margin: 86px 0;
    }

    .commonSectionTitle {
        font-size: clamp(2.3rem, 11vw, 4rem);
    }

    .commonSectionText {
        font-size: 1.02rem;
    }
}
@media (max-width: 560px) {
    .commonActions {
        width: 100%;
        flex-direction: column;
    }

    .commonActions .hero-button {
        width: 100%;
    }
}
@media (max-width: 900px) {
    .contactModal {
        padding: 18px;
    }

    .contactModalPanel {
        max-height: calc(100svh - 36px);
        border-radius: 32px;
    }

    .contactModalGrid {
        grid-template-columns: 1fr;
        padding: 28px;
    }

    .contactModalMain {
        padding: 30px;
    }
}

@media (max-width: 560px) {
    .contactModal {
        padding: 10px;
    }

    .contactModalPanel {
        max-height: calc(100svh - 20px);
        border-radius: 28px;
    }

    .contactModalGrid {
        padding: 18px;
        gap: 14px;
    }

    .contactModalMain,
    .contactModalSideCard,
    .contactModalSideNote {
        border-radius: 24px;
    }

    .contactModalMain {
        padding: 24px;
    }

    .contactModalClose {
        top: 14px;
        right: 14px;

        width: 42px;
        height: 42px;
    }

    .contactModalTitle {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .contactModalText {
        font-size: 0.98rem;
    }

    .contactModalField input {
        height: 50px;
    }

    .contactModalSubmit,
    .contactModalSideButton {
        width: 100%;
    }
}
@media(max-width:560px){
    .floatingPillZone{
        bottom:18px;
        margin-top:28px;
    }

    .floatingPillInner{
        height:56px;
        width:56px;
        padding:0 11px;
    }

    .floatingPill.is-expanded .floatingPillInner{
        width:var(--floating-pill-width,196px);
        padding:0 16px 0 11px;
    }

    .floatingPillArrow{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .floatingPillArrow svg{
        width:16px;
        height:16px;
    }

    .floatingPillText{
        font-size:.84rem;
    }
}
@media(max-width:900px){
    .apiDocsGrid{
        grid-template-columns:1fr;
    }
}

@media(max-width:560px){
    .apiDocs{
        margin-top:86px;
    }

    .apiDocCard,
    .apiEndpointCard{
        padding:22px;
        border-radius:26px;
    }

    .apiCodeTabs{
        overflow-x:auto;
    }

    .apiCodePanel{
        max-height:320px;
        padding:20px;
        font-size:.84rem;
    }
}
@media(max-width:900px){

    .apiFieldHeader{
        display:none;
    }

    .apiFieldRow{
        grid-template-columns:1fr;
        gap:14px;
    }

}
@media(max-width:760px){
    .apiErrorItem{
        grid-template-columns:1fr;
        gap:8px;
    }
}
@media(max-width:560px){
    .apiFaqQuestion{
        padding:22px;
        font-size:.98rem;
    }

    .apiFaqAnswer p{
        padding:0 22px 22px;
    }
}
@media (min-width:901px){

    .site-header.is-floating:has(.docsHeaderNav) .site-header-inner{
        height:118px;
        align-items:flex-start;
    }

    .site-header.is-floating:has(.docsHeaderNav) .menu-button,
    .site-header.is-floating:has(.docsHeaderNav) .discord-button{
        margin-top:12px;
    }

    .site-header.is-floating:has(.docsHeaderNav) .site-logo{
        top:35px;
    }

    .docsHeaderNav{
        position:absolute;

        left:50%;
        bottom:10px;
        transform:translateX(-50%) translateY(-6px);

        width:calc(100% - 180px);

        display:flex;
        align-items:center;
        gap:10px;

        opacity:0;
        pointer-events:none;

        transition:
            opacity .22s ease,
            transform .22s ease;
    }

    .site-header.is-floating .docsHeaderNav{
        opacity:1;
        pointer-events:auto;
        transform:translateX(-50%) translateY(0);
    }

    .docsHeaderNavScroller{
        flex:1;
        min-width:0;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;

        overflow-x:auto;
        scroll-behavior:smooth;
        scrollbar-width:none;

        padding:2px 4px;
    }

    .docsHeaderNavScroller::-webkit-scrollbar{
        display:none;
    }

    .docsHeaderNavScroller a{
        flex:0 0 auto;

        padding:8px 12px;
        border-radius:999px;

        color:var(--text-secondary);
        text-decoration:none;

        font-size:.72rem;
        font-weight:900;
        letter-spacing:.12em;
        text-transform:uppercase;

        transition:
            background .18s ease,
            color .18s ease;
    }

    .docsHeaderNavScroller a.is-active,
    .docsHeaderNavScroller a:hover{
        background:rgba(240,154,193,.18);
        color:rgb(177,30,111);
    }

    .docsHeaderNavArrow{
        width:30px;
        height:30px;

        border:0;
        border-radius:999px;

        display:flex;
        align-items:center;
        justify-content:center;

        background:rgba(255,255,255,.68);
        color:var(--text);

        cursor:pointer;
        flex:0 0 30px;

        box-shadow:0 10px 26px rgba(40,32,28,.10);
    }

    .docsHeaderNavArrow svg{
        width:16px;
        height:16px;

        fill:none;
        stroke:currentColor;
        stroke-width:2.6;
        stroke-linecap:round;
        stroke-linejoin:round;
    }
}

@media (max-width:900px){
    .docsHeaderNav{
        display:none;
    }
}
@media(max-width:700px){
    .triviaDemoCard{
        padding:24px;
        border-radius:30px;
    }

    .triviaDemoAnswers{
        grid-template-columns:1fr;
    }

    .triviaDemoQuestion{
        margin-top:34px;
    }
}
@media(max-width:700px){

    .triviaDemoTop{
        flex-direction:column;
        gap:12px;
    }

    .triviaDemoQuestionId{
        margin-left:2px;
    }

}
@media(max-width:900px){
    .triviaBenefitsGrid{
        grid-template-columns:1fr;
    }

    .triviaBenefitCardLarge,
    .triviaBenefitCardWide{
        grid-column:auto;
    }
}
@media (max-width:700px){

    .triviaDemoActions{
        flex-direction:column;
        gap:14px;
    }

    .triviaDemoActions > *{
        width:100%;
        max-width:280px;
    }

}
@media(max-width:560px){
    .apiDisclaimer{
        margin-top:72px;
        text-align:left;
    }

    .apiDisclaimer p{
        font-size:11px;
        line-height:1.8;
    }
}
@media (max-width:700px){
    .api-hero-section h1{
        overflow-wrap:anywhere;
        word-break:normal;
        hyphens:auto;
    }
}
@media (max-width:1100px){

    .siteFooterGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:60px 56px;
    }

    .siteFooterCommunityText{
        max-width:520px;
    }

}
@media (max-width:680px){

    .siteFooter{
        padding-top:20px;
    }

    .siteFooterDivider{
        width:calc(100% - 32px);
        margin-bottom:54px;
    }

    .siteFooterInner{
        width:calc(100% - 32px);
    }

    .siteFooterGrid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .siteFooterEyebrow{
        margin-bottom:20px;
    }

    .siteFooterWebsiteCard{
        min-height:74px;
        border-radius:16px;
    }

    .siteFooterCommunityText{
        max-width:none;
    }

    .siteFooterMeta{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;

        margin-top:58px;
    }

    .siteFooterBrand{
        gap:12px;

        margin-top:70px;
        padding:0 12px;
    }

    .siteFooterBrand{
        width:calc(100% - 24px);
        gap:12px;
        margin-top:24px;
        padding-bottom:18px;
    }

    .siteFooterBrandIcon{
        width:clamp(58px,16vw,82px);
        height:clamp(58px,16vw,82px);
    }

    .siteFooterBrandText{
        max-width:calc(100% - clamp(72px,20vw,100px));
    }

}
@media (max-width:700px){

    .siteSideMenu{
        width:100%;
        max-width:none;

        background:rgba(248,245,242,.94);
        border-right:0;
    }

    .siteMenuOverlay{
        display:none;
    }

    .siteSideMenuInner{
        padding:
            max(20px, env(safe-area-inset-top))
            22px
            max(24px, env(safe-area-inset-bottom));
    }

    .siteSideMenuTop{
        margin-bottom:30px;
    }

    .siteSideMenuLink{
        grid-template-columns:28px minmax(0,1fr) 22px;
        gap:11px;

        padding:19px 0;
    }

    .siteSideMenuLinkContent strong{
        font-size:17px;
    }

    .siteSideMenuLinkContent small{
        font-size:12.5px;
    }

    .siteSideMenuCoffeeBae{
        padding-top:34px;
    }
}
@media (max-width:700px){

    .siteSideMenuLogoCandy{
        width:31px;
        height:31px;
        flex-basis:31px;
    }

    .siteSideMenuLogoCandySvg{
        width:31px;
        height:31px;
    }

    .siteSideMenuLogoText,
    .siteSideMenuLogoTextSvg{
        width:142px;
    }

}
@media (max-width: 760px) {
    .legalBreadcrumbs {
        padding-top: 6.25rem;
        padding-right: 1.2rem;
        padding-left: 1.2rem;
        font-size: 0.8rem;
    }

    .legalHero {
        padding-top: 3rem;
        padding-bottom: 4.5rem;
    }

    .legalHero h1 {
        max-width: 12ch;
    }

    .legalContainer {
        width: min(calc(100% - 2.4rem), 880px);
    }

    .legalIntro {
        margin-bottom: 4.5rem;
        padding: 1.35rem;
        border-radius: 20px;
    }

    .legalSection {
        padding-bottom: 4.5rem;
    }

    .legalSection + .legalSection {
        padding-top: 4.5rem;
    }

    .legalSectionHeader {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin-bottom: 2rem;
    }

    .legalSectionNumber {
        font-size: 1rem;
        letter-spacing: 0.08em;
    }

    .legalSectionHeader h2 {
        font-size: clamp(1.65rem, 8vw, 2.15rem);
    }

    .legalSectionContent {
        padding-left: 0;
    }

    .legalSectionContent p,
    .legalList li {
        line-height: 1.8;
    }

    .legalDefinitionList {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }

    .legalContactSection .legalSectionContent {
        padding: 1.4rem;
        border-radius: 20px;
    }

    .legalContactSection .hero-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .legalBreadcrumbs {
        gap: 0.4rem;
    }

    .legalContainer {
        width: min(calc(100% - 2rem), 880px);
    }

    .legalIntro {
        padding: 1.15rem;
    }

    .legalSectionContent h3 {
        margin-top: 2.2rem;
    }

    .legalList li {
        padding-left: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .legalBreadcrumbs a {
        transition: none;
    }
}
@media (max-width: 760px) {
    .legalHero {
        padding-top: 2.75rem;
        padding-bottom: 3.75rem;
    }

    .legalIntro {
        margin-bottom: 3.25rem;
    }

    .legalSection {
        padding-bottom: 3.75rem;
    }

    .legalSection + .legalSection {
        padding-top: 3.75rem;
    }

    .legalSection:nth-of-type(odd)::before {
        inset: 1rem -0.65rem;
        border-radius: 30px;

        background:
            radial-gradient(
                circle at 10% 5%,
                rgba(177, 30, 111, 0.045),
                transparent 55%
            ),
            rgba(177, 30, 111, 0.014);
    }

    /*
     * Numărul și titlul formează din nou un singur element.
     * Nu mai avem numărul mic într-un colț și titlul centrat.
     */
    .legalSectionHeader {
        display: block;

        min-height: 0;
        padding: 0.35rem 0 0 3.7rem;
        margin-bottom: 2rem;
    }

    .legalSectionNumber {
        top: 0;
        left: 0;

        color: rgba(177, 30, 111, 0.12);
        font-size: 3.25rem;
        letter-spacing: -0.09em;
        line-height: 0.82;
    }

    .legalSectionHeader h2 {
        max-width: none;

        font-size: clamp(1.9rem, 8.4vw, 2.45rem);
        letter-spacing: -0.045em;
        line-height: 1.08;
        text-align: left;

        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }

    .legalSectionContent {
        padding-left: 0;
    }

    .legalSectionContent p,
    .legalList li {
        font-size: 1rem;
        line-height: 1.78;
    }

    .legalSectionContent h3 {
        margin-top: 2.5rem;
        font-size: 1.16rem;
        line-height: 1.3;
    }

    .legalDefinitionList {
        margin-top: 1.5rem;
    }

    .legalDefinitionList > div {
        padding: 1.45rem;
    }

    .legalContactSection .legalSectionContent {
        padding: 1.6rem;
        border-radius: 24px;
    }

    .legalContactSection .hero-button {
        width: auto;
        min-width: 190px;
    }
}

@media (max-width: 420px) {
    .legalContainer {
        width: calc(100% - 2rem);
    }

    .legalSectionHeader {
        padding-left: 3.35rem;
    }

    .legalSectionNumber {
        font-size: 2.9rem;
    }

    .legalSectionHeader h2 {
        font-size: clamp(1.78rem, 8.2vw, 2.15rem);
    }

    .legalIntro {
        margin-bottom: 2.8rem;
    }

    .legalDefinitionList > div {
        padding: 1.3rem;
    }

    .legalContactSection .hero-button {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }
}
@media (max-width:700px){

    .apiHeroTags{
        justify-content:flex-start;

        gap:.5rem;

        margin-top:1.35rem;
        margin-bottom:2.15rem;
    }

    .apiHeroTag{
        min-height:2.25rem;

        padding:.46rem .78rem;

        font-size:.8rem;
    }

    .apiHeroTagIcon{
        width:.9rem;
        height:.9rem;

        flex-basis:.9rem;
    }

}
@media (max-width:768px){

    .errorHero{

        min-height:auto;

        padding:125px 20px 70px;

    }

    .errorHeroImage{

        width:min(100%,170px);

    }

    .errorHero h1{

        font-size:clamp(2.2rem,11vw,3.4rem);

    }

    .errorHeroText{

        font-size:1rem;

        line-height:1.7;

    }

    .errorHero .hero-button{

        width:100%;
        max-width:320px;

    }

    .errorDivider{

        margin:44px auto 18px;

    }

    .errorLinks{

        gap:10px;

    }

}